我想在主页上显示一个变量

Question

我在使用 React Js 制作语音识别应用程序时遇到问题。我写了这段代码，我在其中创建了一个名为“transcript”的变量，其中包含我在 recognition.onresult 中所说的内容，并在控制台中打印出来，但我想在主页上显示我所说的内容（比如在<h1></h1>)。我该怎么做？

import "./styles.css";

let img_url = "voice_off.png";

const SpeechRecognition =
  window.SpeechRecognition || window.webkitSpeechRecognition;

const recognition = new SpeechRecognition();

recognition.start();

function App(props) {
  const [count, setCount] = useState(0);

  const voiceCommands = () => {
    // On Start
    recognition.onstart = () => {
      console.log("voice is activated");
    };

    // Do something when we get a result
    recognition.onresult = (e) => {
      let current = e.resultIndex;

      let transcript = e.results[current][0].transcript;
      console.log(transcript);

      if (transcript === "next") {
        setCount(count + 1);
      } else {
        if (transcript === "go back") {
          setCount(count - 1);
        }
      }
    };
  };

  useEffect(() => {
    voiceCommands();
  });

  return (
    <div className="app">
      <p className="text">Counter: </p>
      <h1 className="text"> {count} </h1>
      <div className="image_cropper">
        <img className="voice_image" src={img_url} alt="nothing"></img>
      </div>
      <button className="button_plus" onClick={() => setCount(count + 1)}>
        +
      </button>
      <button className="button_minus" onClick={() => setCount(count - 1)}>
        -
      </button>
      <button className="button_microphone" onClick={() => recognition.start()}>
        {" "}
        click me to enable mic!!!
      </button>
    </div>
  );
}

export default App;```

Answer 1

像这样创建一个新变量来存储整个成绩单

const [msg, setMsg] = useState("")

接下来，每当调用 recognition.onresult 方法时，您都可以像这样将新的文字记录附加到浏览器上显示的内容中

setMsg(msg + " " + transcript)

现在您所做的是将成绩单设置为 React 组件状态。
最后一步是在浏览器中打印它。

像这样在 return 对象中添加一行

<h1>{msg}</h1>

如果我的解决方案不是您想要的，请不要喷我谢谢

我想在主页上显示一个变量

I want show a variable on the main page

voice-recognition

reactjs