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

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

您也可以使用箭头功能（就像定义getInitialState一样）。

Answer 2

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

是

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

Answer 3

您可以替换：

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/

如何将.bind（this）重构为ES6语法

3 个答案: