首页 > 解决方案 > Container ReactJS:如何设置子组件的状态?

问题描述

我对 ReactJS 有一点问题。我正在尝试制作一个 MVP 系统(模型/视图/演示者)。仅供参考,这不应该影响其余部分,但我也使用 Typescript。

为此,我创建了基于 material-ui 的简单组件。然后我的视图是一个 React.Component,它的渲染函数使用我的较低级别的组件,其属性来自我的视图的雕像。基本上我的观点是一种组件容器。我的礼物是一个在我的视图上存储引用的对象,以便能够更新其状态。

不幸的是,当我想从我的演示文稿中更新我的视图状态以更新渲染中使用的所有组件的状态时,我有一条消息告诉我我的组件没有未安装:

无法在尚未安装的组件上调用 set State

实际上,似乎没有调用我视图的 componentDidMount 函数。

为了显示我的观点,从我的演示者那里,我做了以下功能:

display (): void {
ReactDOM.render (this.view.render (), document.getElementById ('root'));
}

在我看来,我被迫在渲染中使用的组件上使用 refs,以便更改子组件而不是主组件(视图)的状态。

问题:是否可以制作一个 React 组件,它调用其他组件(基本上是制作一个容器),当我们更新这个容器的状态时,不使用 ref 的概念更新子组件?

如果我不够明确,我会尝试为您提供一段代码来说明我的系统。

太感谢了

编辑:你可以在这个小提琴中看到我的示例代码:https ://jsfiddle.net/q4jdeh18/ 。很抱歉,但在我的 Visual Studio 代码编辑器上,此代码有效,但在 Fiddle 上无效。当我使用我的编辑器进行测试时,单击按钮后我会收到消息。复选框和按钮上的标签不会更新:

警告:无法在尚未安装的组件上调用 setState。这是一个无操作,但它可能表明您的应用程序中存在错误。相反,在 TestView 组件中直接分配this.state或定义state = {}; 具有所需状态的类属性。

标签: javascriptreactjs

解决方案


推荐阅读