将 React 组件状态传递给另一个文件

Question

在名为serialcomm.js的后端文件中，我有一个名为“mode”的变量。我想将模式的值设置为与前端组件 Pacemode() 中的状态“模式”相同的值。如何将 Pacemode 的状态值传递给serialcomm.js 文件？我正在使用 React.js、Node.js 和 SerialPortIO.js。

Pacemode.js 代码：

/*

This navbar component will let the user select which pacing mode interface to display on the page.

It will control rendering the view

*/

import React from 'react';

import '../../stylesheets/PaceMode.css';

import Button from 'react-bootstrap/Button';

// components

import AOO from './AOO';

import AAI from './AAI';

import VOO from './VOO';

import VVI from './VVI';

import VVIR from './VVIR';

import VOOR from './VOOR';

import AOOR from './AOOR';

import AAIR from './AAIR';

import DOO from './DOO';

import DOOR from './DOOR';

const PaceMode = () => {

    const [mode, setMode] = React.useState('VOO');

    function renderInterface (modeVal) {

        switch(modeVal) {

            case 'VOO': 

                return <VOO />;

            case 'VVI':

                return <VVI />;

            case 'AOO':

                return <AOO />;

            case 'AAI':

                return <AAI />;

            case 'VOOR':

                return <VOOR />;

            case 'VVIR':

                return <VVIR />;

            case 'AOOR':

                return <AOOR />;

            case 'AAIR':

                return <AAIR />;

            case 'DOO':

                return <DOO />;

            case 'DOOR':

                return <DOOR />;

            default:

                return <h2>{mode} Interface Goes Here</h2>;

        }

    }

Answer 1

最终我自己解决了这个问题。我使用 Express.js 设置后端并创建一个 POST 请求以将数据发送到串行端口。