javascript - React.js 调用组件进入setState

Question

我正在尝试制作 toastr 组件。

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

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

从这段代码中，您可以根据需要更改 toastr 的值，当您多次单击该按钮时， toastr 会一直显示，然后在最后一次单击后 2.6 秒后消失。但是，当我将组件(甚至是 div)设置为“toasterText”并单击按钮时，

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

toastr 一键出现，再次点击按钮消失。

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

抱歉我的英语不好。

Answer 1

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

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

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