Ecmascript 6 在react中更新变量

我有一个似乎很简单的问题。在下面的代码中，我不能更新变量引用，但我可以直接设置它，你能告诉我为什么吗

这将正确更新HTML元素：

startTimer() {
    let timerOutput = this.timerOutput.innerHTML = this.state.timer.toLocaleTimeString();
}

但是，使用此代码时，DOM中不会发生任何事情：

startTimer() {
        let timerOutput = this.timerOutput.innerHTML;
        timerOutput = this.state.timer.toLocaleTimeString();
    }

整个计时器容器组件的打印输出：

export class Timer extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {timer: new Date()};
      }

    startTimer() {
        let timerOutput = this.timerOutput.innerHTML;
        timerOutput = this.state.timer.toLocaleTimeString();
        // timerOutput = this.state.timer.toLocaleTimeString();
        console.log(this.state.timer);
    }

    handleClick(e) {
        this.startTimer(e);
    }


  componentDidMount() {

  }

  render() {

    return (
      <section>
        <div id="timerOut"
        ref={(output) => {this.timerOutput = output }}
        ></div>
        <button onClick={this.handleClick.bind(this)} value="Click me" />;
        <h2>It is {this.state.timer.toLocaleTimeString()}.</h2>
      </section>
    );
  }
}

export default Timer;

导出类计时器扩展React.PureComponent{
建造师（道具）{
超级（道具）；
this.state={timer:new Date（）}；
}
startTimer（）{
让timerOutput=this.timerOutput.innerHTML；
timerOutput=this.state.timer.toLocaleTimeString（）；
//timerOutput=this.state.timer.toLocaleTimeString（）；
console.log（this.state.timer）；
}
handleClick（e）{
这是startTimer（e）；
}
componentDidMount（）{
}
render（）{
返回(
{this.timerOutput=output}
>
;
它是{this.state.timer.toLocaleTimeString（）}。
);
}
}
导出默认定时器；

执行此操作时：

let timerOutput = this.timerOutput.innerHTML;
timerOutput = this.state.timer.toLocaleTimeString();

您没有更改元素的

innerHTML

，只是更改该元素的一个副本。要更改DOM，必须执行以下操作：

this.timerOutput.innerHTML = this.state.timer.toLocaleTimeString();

---

编辑：要清楚，它确实回答了你的问题，但它不是这样做的“反应方式”。执行此操作时，应使用

setState（）

管理状态：

let timerOutput = this.timerOutput.innerHTML;
timerOutput = this.state.timer.toLocaleTimeString();

您没有更改元素的

innerHTML

，只是更改该元素的一个副本。要更改DOM，必须执行以下操作：

this.timerOutput.innerHTML = this.state.timer.toLocaleTimeString();

---

编辑：要清楚，它确实回答了你的问题，但它不是这样做的“反应方式”。您应该使用

setState（）

管理状态。您需要使用

setState

重新渲染组件。尝试更改

startTimer（）

方法，如下所示。如果每次单击按钮时都试图显示当前时间

startTimer() {
    this.setState({timer: new Date()})
}

---

您需要使用

setState

重新渲染组件。尝试更改

startTimer（）

方法，如下所示。如果每次单击按钮时都试图显示当前时间

startTimer() {
    this.setState({timer: new Date()})
}

---

变量不是对属性的引用。您需要指定给属性本身！赋值给变量只是更新变量。赋值运算符关联到右侧，因此

a=b=c

表示

a=（b=c）

，即

b=c；a=b

。变量不是对属性的引用。您需要指定给属性本身！赋值给变量只是更新变量。赋值运算符关联到右侧，因此

a=b=c

表示

a=（b=c）

，即

b=c；a=b

。虽然没有错，但不应手动更改React控制的DOM。我想在这种情况下没关系，因为元素最初没有内容，但这肯定不是react的操作方式。虽然没有错，但不应该手动更改react控制的DOM。我想在这种情况下是可以的，因为元素最初没有内容，但这肯定不是做事情的反应方式。