将innerHTML与React结合使用

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都会再次调用render函数，这意味着如果您编写：

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

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

因此，发生的情况是：每次调用createString函数时都会更改状态，然后react再次调用render函数以反映新状态；然后用户按下"="操作符，调用getResult函数，然后手动更改显示div的内容；如果用户按下"C"按钮，则状态将再次更新，并且react调用将再次呈现以反映新状态。

另一件事是，您不应该手动更改div的innerHTML属性。相反，让react注意反映组件的状态。因此，您应该这样做.setState（｛string:updatedResult｝），而不必担心innerHTML。