如何使用 React 在单独的 div 中动态显示文本区域的值？

Question

我正在使用 React （初学者）开发 markdown 预览器，并且尝试在页面上的单独 div 中显示文本区域的当前值。我不确定如何最好地使用 React 来处理 textarea 值。我的组件层次结构如下：应用程序工具栏目的地部门工具栏文本区编辑预览器目前，我的 App 组件中有一个函数可以处理对 textarea 的更改 - 它作为 props 传递给 Editor 组件，并进一步传递给 Textarea 组件，在 onChange 事件后调用它：function App() {  const handleTextChange = () => {    const textarea = document.getElementById("textarea");    let text;    if (textarea === null) {      text = "";    } else {      text = textarea.value;    }    console.log(text);    return text;  };  return (    <div className="App">      <Header />      <div className="App-body">        <Editor handleTextChange={handleTextChange} />        <Preview />      </div>    </div>  );}export default App;此功能正在运行 - 我可以在键入时在控制台中看到文本区域值的更新。问题如下：我应该如何将此值传递给目标 div？这是否需要涉及 State，以便每次 textarea 值发生变化时目标 div 都会重新渲染？在我的 App 组件中声明 handleTextChange 函数是正确的开始方法吗？有没有更好的方法来达到这个结果？React（和 Stack Overflow）新手 - 感谢任何建议（或相关问题的链接）

Answer 1

首先，您有两种类型的组件：ES6 类组件（可以通过 this.state 使用状态）和您的情况下的功能组件。功能组件不能使用React状态，但React中引入了一个新功能，称为react hooks（useState hook）。在您的情况下，您需要在应用程序组件中使用状态变量，然后通过 props 将此状态传递给您的组件。您需要在handleText更改函数中设置组件的状态，并将其作为道具传递给预览组件。