使用innerHTML和React

Question

我使用React制作了一个迷你计算器。

它有效，但我不确定我理解为什么。有人能指出我没有完全掌握的概念吗？

我的代码如下。

这是我的预期： 在第一次操作之后（第一次执行getResult函数）我希望必须在clearingState函数中编写一个条件，以将innerHTML的{​​{1}}重置为{{} 1}} <div id="display"函数将其设置为{this.state.string}变量。然而，它没有我必须做这个调整。我不明白为什么。

提前致谢..

getResult

Answer 1

每次更改状态时，react都会再次调用render函数，这意味着如果你写了：

<div id ="display">{this.state.string}</div>

当你调用clearingState函数时，react会检测到你改变了状态并再次渲染你的组件，语句{this.state.string}将替换为新的状态值。

所以，正在发生的事情是：每次调用createString函数时都要更改状态，然后再次调用render函数来反映新状态;然后用户按下“=”运算符并调用getResult函数并手动更改显示div的内容;如果用户按下“C”按钮，状态将再次更新并再次响应调用以反映新状态。

另一件事是，您不应该手动更改div的innerHTML属性。相反，让我们做出反应，注意反映组件的状态。所以，你应该做this.setState（{string：updatedResult}）而不用担心innerHTML。