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

Question

在名为 serialcomm.js 的后端文件中，我有一个名为 'mode' 的变量。我想将模式的值设置为与前端组件 Pacemode() 中的状态 'mode' 相同的值。我如何将 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>;
        }
    }

    return (
        <div className='paceModeSelector'>
            <span style={{display: 'flex', minWidth: '100%'}}>
                <Button variant='secondary' className='paceBtn' onClick={() => {setMode('VOO')}} active={mode === 'VOO' ? true : false}>VOO</Button>
                <Button variant='secondary' className='paceBtn' onClick={() => {setMode('VVI')}} active={mode === 'VVI' ? true : false} >VVI</Button>
                <Button variant='secondary' className='paceBtn' onClick={() => {setMode('AOO')}} active={mode === 'AOO' ? true : false} >AOO</Button>
                <Button variant='secondary' className='paceBtn' onClick={() => {setMode('AAI')}} active={mode === 'AAI' ? true : false} >AAI</Button>
            </span>
            {/* interface panel will use a switch to decide which component to render based on state. */
                renderInterface(mode)            
            }
        </div>
    );
}

export default PaceMode;

serialcomm.js代码：

var serialport = require('serialport');
var Readline = serialport.parsers.Readline;

var port = new serialport('COM4',{
  baudRate: 115200,
  //parser: new Readline("\r\n")
})
var buffer = Buffer.alloc(5);
var currentMode; // want to assign value based on the mode from Pacemode.js
console.log(currentMode);

Answer 1

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

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

Pass React Component State to Another File

javascript

serial-port

reactjs