reactjs - React 嵌套子组件的应用混淆设置状态

Question

我是一名嵌入式开发人员，对 React 不熟悉，并且对子组件和嵌套子组件的行为有些苦恼。

我知道对于要重新渲染的任何组件，状态必须更改。我正在使用一个菜单组件的示例，其中包含一个项目组件。当一些全局级别事件发生时，我想更改项目组件显示的文本。

这是一个小提琴，它显示了一些我希望工作的代码：

https://codesandbox.io/s/dark-rain-8mfsp?file=/src/App.tsx

单击 div 时，将调用菜单的 setText 函数，该函数调用项目组件，设置状态。此状态用于 item 组件的渲染功能，因此我希望 item 和 menu 都被重新渲染。

相反，我收到一条错误消息，提示我无法设置尚未安装的对象的状态。我还以为它已经安装了..

也许我通过调用 this.componentname.render() 将声明的组件与渲染函数中的组件链接起来的方式是问题所在 - 但还能怎么做呢？

提前致谢！

标签： reactjs

Answer 1

这是您的沙盒的工作版本。 https://codesandbox.io/s/lucid-bird-qecj0?file=/src/App.tsx:0-899

我看到你是新来的反应。我建议你使用钩子而不是类组件。