在ReactJS中使用Web Serial

import React, { useState, useEffect } from 'react';

function SerialApp() {
  const [port, setPort] = useState(null);
  const [data, setData] = useState('');

  useEffect(() => {
    if ('serial' in navigator) {
      navigator.serial.requestPort().then((result) => {
        setPort(result.ports[0]);
        result.ports[0].addEventListener('data', (event) => {
          setData(event.target.value);
        });
        result.ports[0].open({ baudRate: 9600 }).then(() => {
          console.log('Port opened');
        });
      });
    } else {
      console.error('Web Serial API not supported');
    }
  }, []);

  const sendData = () => {
    if (port && port.readyState === 'open') {
      port.write('Hello, Serial Port!');
    }
  };

  return (
    <div>
      <h1>Serial Communication</h1>
      <button onClick={sendData}>Send Data</button>
      <pre>{data}</pre>
    </div>
  );
}

export default SerialApp;