Передача состояния компонента React в другой файл

#javascript #reactjs #serial-port

#javascript #reactjs #последовательный порт

Вопрос:

Во внутреннем файле, вызываемом serialcomm.js , У меня есть переменная под названием ‘mode’. Я хочу установить для значения mode то же значение, что и для состояния ‘mode’ из моего компонента интерфейса Pacemode(). Как бы я передал значение состояния Pacemode в serialcomm.js файл? Я использую React.js , Node.js и SerialPortIO.js .

The 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;
 

The serialcomm.js код:

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

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

Ответ №1:

В конце концов решил это самостоятельно. Я настраиваю серверную часть с Express.js и создал POST-запрос для отправки данных в serialport.