如何将.bind(this)重构为ES6语法

Question

例如，我有一个React组件，它简单地加载文本。我在将.bind(this)重构为es6语法时遇到了问题。

var Loading = React.createClass({

getInitialState:() => {
this.originalText = 'Loading';
   return {
       text: 'Loading'
   }
},

componentDidMount:function() {
   let stopper = this.originalText + '...' ;
   this.interval = setInterval(function(){
       if(this.state.text === stopper) {
           this.setState({
               text:this.originalText
           })
       }else {
           this.setState({
               text: this.state.text + '.'
           })
       }
   }.bind(this), 300)
},


render: function () {
   return (
       <div style={styles.container}>
           <p style={styles.content}>{this.state.text}</p>
       </div>
   )
  }
});

在这里，我想重构

}.bind(this), 300)

转换为ES6语法。解决方案是什么。

Answer 1

您可以替换：

this.interval = setInterval(function(){
    /* ... */
}.bind(this), 300)

通过以下方式：

 this.interval = setInterval( () => {
    /* ... */
 }, 300)

这是因为箭头函数会自动绑定。顺便说一句，我把你所有的组件代码重构成了ES6：

class Loading extends React.Component {

  constructor(props) {
    super(props)
    this.originalText = 'Loading'
    this.state = {
      text: 'Loading'
    }
  }

  componentDidMount() {
    let stopper = this.originalText + '...' ;
    this.interval = setInterval( () => {
      if(this.state.text === stopper) {
        this.setState({
          text:this.originalText
        })
      } else {
        this.setState({
          text: this.state.text + '.'
        })
      }
    }, 300)
  }


  render() {
    return (
      <div style={styles.container}>
        <p style={styles.content}>{this.state.text}</p>
      </div>
    )
  }

}

小提琴在这里：https://jsfiddle.net/mrlew/jgtyetwu/

Answer 2

仍然是}.bind(this), 300)。ES6是向后兼容的。

您还可以使用箭头函数(就像定义getInitialState时一样)。

Answer 3

function () { ... }.bind(this)是箭头函数应该做的事情。

它是

this.interval = setInterval(() => { ... }, 300)