javascript - React.js 调用组件到 setState

Question

我正在尝试制作烤面包机组件。

https://codesandbox.io/s/62n81oy4pr

在 index.js 中，this.setState({ toasterText: "Room added to summary." });

从此代码中，您可以随意更改烤面包机的值，当您多次单击按钮时，烤面包机会一直显示，然后在最后一次单击后 2.6 秒后消失。但是，当我将一个组件（甚至是一个 div）设置为“toasterText”并单击按钮时，

像这样的东西， this.setState({ toasterText: <Component>asdfasdf</Component> });

烤面包机一键出现，再次单击按钮消失。

我想我可以用 componentDidUpdate 做点什么，或者我只是不允许在 setState 中设置组件？

对不起，我的英语不好。

标签： javascriptreactjs

Answer 1

它“消失”的原因是因为组件被重新安装（销毁并重新创建），而不是在您的第一个示例中重新渲染（文本更新）。

虽然在技术上可以做到这一点，但出于多种原因（您遇到的问题是其中之一），它被认为是反模式。我想不出任何你想要采取这种方法的理由。只需坚持更新文本。

如果您确实必须实现第二种方法，请尝试向key组件添加一个道具。这应该可以防止重新安装行为。