React組件不適用於ES6

Question

我用React編寫了這個Timer組件，可以在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，仍然希望自己進一步提高自己。

Answer 1

您需要綁定刻度

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

Answer 2

您需要綁定您的tick函數：

    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'));

這是jsfiddle