React.js将组件调用到setState

Question

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

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

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

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

类似的东西， this.setState({ toasterText: <Component>asdfasdf</Component> });

一键显示烤面包机，然后再次单击该按钮，烤面包机消失。

我想我可以对componentDidUpdate做一些事情，还是不允许我在setState中设置组件？

对不起，我的英语不好。

Answer 1

之所以“消失”，是因为该组件已重新安装（销毁并重新创建），而不是在第一个示例中重新呈现（文本已更新）。

尽管从技术上讲可以做到这一点，但由于多种原因（您遇到的问题之一），它被视为反模式。我想不出您要采用这种方法的任何理由。只需坚持更新文本即可。

如果您真的需要实施第二种方法，请尝试向组件添加key道具。那应该防止重新安装行为。