在 React 中使用 innerHTML

Question

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

它有效，但我不确定我明白为什么。有人能指出我在这里没有完全理解的概念吗？

我的代码如下。

这是我的预期：第一次操作后（第一次执行 getResult 函数）我预计必须在 clearingState 函数中写一个条件来将 <div id="display" 的 innerHTML 重置为 {this.state.string} 因为 getResult 函数将其设置为 updateResult 变量。然而，它不需要我做这个调整就可以工作。我不明白为什么。

提前致谢..

<script type="text/babel">
  var Calculator = React.createClass({
      createString: function(event){
        var previousState = this.state.string;
        var target = event.target;
        var number = target.innerHTML;
        var newState = previousState+number;
        this.setState({string: newState});
      },
      clearingState: function(event){
        var newState = "";
        this.setState({string: newState});
      },
      getResult: function(){
        var stringResult = this.state.string;
        var updateResult = eval(stringResult);
        return document.getElementById("display").innerHTML = updateResult;
      },
      getInitialState: function(){
        return ({
          string: ""
        })
      },
      render: function(){
          return (
              <div>
                <div id ="display">{this.state.string}</div>
                <div id="main">
                    <div className="key zero" onClick={this.createString}>0</div>
                    <div className="key one" onClick={this.createString}>1</div>
                    <div className="key two" onClick={this.createString}>2</div>          
                    <div className="key three" onClick={this.createString}>3</div>
                    <div className="key four" onClick={this.createString}>4</div>
                    <div className="key five" onClick={this.createString}>5</div>
                    <div className="key six" onClick={this.createString}>6</div>
                    <div className="key seven" onClick={this.createString}>7</div>
                    <div className="key eight" onClick={this.createString}>8</div>
                    <div className="key nine" onClick={this.createString}>9</div>
                    <div className="key d" onClick={this.createString}>.</div>
                    <div className="key C" onClick={this.clearingState}>C</div>
                </div>
                <div id="operators">
                    <div className="key mp" onClick={this.createString}>*</div>
                    <div className="key dv" onClick={this.createString}>/</div>
                    <div className="key ad" onClick={this.createString}>+</div>
                    <div className="key sb" onClick={this.createString}>-</div>
                    <div className="key eq" onClick={this.getResult}>=</div>
                </div>
              </div>
          );
      }
  });

  ReactDOM.render(
    <Calculator/>,
    document.getElementById('calculator')
  )

Answer 1

每次你改变状态时，react 都会再次调用渲染函数，这意味着如果你这样写：

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

当您调用 clearingState 函数时，React 会检测到您更改了状态并会再次呈现您的组件，语句 {this.state.string} 将被替换为新的状态值。

因此，发生的事情是：每次调用 createString 函数时都在更改状态，然后 react 再次调用 render 函数以反映新状态；然后用户按下“=”运算符并调用 getResult 函数，您手动更改显示的内容 div；如果用户按下 "C" 按钮，状态将再次更新，并且反应会再次调用渲染以反映新状态。

另一件事是，您不应手动更改 div 的 innerHTML 属性。相反，让 React 负责反映组件的状态。所以，你应该做 this.setState({string: updatedResult}) 而不用担心 innerHTML.

在 React 中使用 innerHTML

using innerHTML with React

innerhtml

reactjs