Javascript React组件不与ES6一起工作

我用React编写了这个计时器组件，它确实适用于es5，但由于某些原因，它不适用于es6

class Timer extends React.Component{
  constructor() {
    super();
    this.state = {start: 15}
    }

  tick() {
    this.setState ({start: this.state.start - 1});
  }

  componentDidMount() {
    this.interval = setInterval(this.tick, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  } 

  render() {
    return <h1> Time here:  {this.state.start}</h1>
  }
}

ReactDOM.render(<Timer />, document.getElementById('app'));

类计时器扩展React.Component{
构造函数（）{
超级（）；
this.state={start:15}
}
勾选（）{
this.setState（{start:this.state.start-1}）；
}
componentDidMount（）{
this.interval=setInterval（this.tick，1000）；
}
组件将卸载（）{
clearInterval（这个.interval）；
} 
render（）{
此处返回时间：{this.state.start}
}
}
ReactDOM.render（，document.getElementById（'app'））；

需要指出的是，我不太熟悉React，仍在进一步提高自己。

您需要绑定tick

  constructor() {
    super();
    this.state = {start: 15}
    this.tick = this.tick.bind(this)
    }

你需要把虱子绑起来

  constructor() {
    super();
    this.state = {start: 15}
    this.tick = this.tick.bind(this)
    }

---

您需要绑定勾号函数：

    class Timer extends React.Component{
  constructor() {
    super();
    this.state = {start: 15}
    }

  tick() {
    this.setState ({start: this.state.start - 1});
  }

  componentDidMount() {
    this.interval = setInterval(this.tick.bind(this), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  } 

  render() {
    return <h1> Time here:  {this.state.start}</h1>
  }
}

React.render(<Timer />, document.getElementById('container'));

类计时器扩展React.Component{
构造函数（）{
超级（）；
this.state={start:15}
}
勾选（）{
this.setState（{start:this.state.start-1}）；
}
componentDidMount（）{
this.interval=setInterval（this.tick.bind（this），1000）；
}
组件将卸载（）{
clearInterval（这个.interval）；
} 
render（）{
此处返回时间：{this.state.start}
}
}
React.render（，document.getElementById（'container'）；

---

以下是需要绑定勾号函数的

：

    class Timer extends React.Component{
  constructor() {
    super();
    this.state = {start: 15}
    }

  tick() {
    this.setState ({start: this.state.start - 1});
  }

  componentDidMount() {
    this.interval = setInterval(this.tick.bind(this), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  } 

  render() {
    return <h1> Time here:  {this.state.start}</h1>
  }
}

React.render(<Timer />, document.getElementById('container'));

类计时器扩展React.Component{
构造函数（）{
超级（）；
this.state={start:15}
}
勾选（）{
this.setState（{start:this.state.start-1}）；
}
componentDidMount（）{
this.interval=setInterval（this.tick.bind（this），1000）；
}
组件将卸载（）{
clearInterval（这个.interval）；
} 
render（）{
此处返回时间：{this.state.start}
}
}
React.render（，document.getElementById（'container'）；

---

这是

什么意思？它“不”工作？@它呈现，但state.start不变。您需要在构造函数中将函数绑定到它。this.tick=this.tick.bind（this）；“不工作”是什么意思？@它会呈现，但state.start不会更改..您需要在构造函数中将函数绑定到它。this.tick=this.tick.bind（this）；Nvm，我想只有像onClick这样的活动才需要它。谢谢你为我澄清；）@（每次将对方法的引用传递给另一个函数时；）不一定每次都是。只要在函数中引用了它，并且希望它引用当前组件（在React组件的情况下）Nvm，我认为只有像onClick这样的事件才需要它。谢谢你为我澄清；）@（每次将对方法的引用传递给另一个函数时；）不一定每次都是。只要您在函数中引用了它，并且希望它引用当前组件（对于React组件）