リファクタリングする方法（これ）をES6の構文

Question

にバインドします。たとえば、テキストを読み込むだけのReactコンポーネントがあります。私はes6の構文に.bind（this）をリファクタリングすることに問題があります。ここ

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

私はES6構文に

}.bind(this), 300) 

をリファクタリングしたいと思います。解決策は何でしょうか。

Answer 1

です：矢印機能が自動的に結合するのでです

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

：と

this.interval = setInterval(function(){ 
    /* ... */ 
}.bind(this), 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)