ReactJSアクセス "this"コールバック

Question

コールバック内で、コンポーネントに渡された小道具を取得したいと思いますが、this.propsを取得できません。thisはそこに定義されていません。ここで

は簡単な例です：

var MyComponent = React.createClass({ 
    options:{ 
    componentFunction: function(c) { 
     console.log(this.props.myProp); //this references to the options here, not the component itself 
    } 
    }, 
    render: function() { 
    return (
     <OtherComponent options={ this.options } /> 
    ); 
    } 
}); 

そして、私は小道具をこのように渡します

<MyComponent myProp={"x"}; 

は、 おかげで任意のヘルプをお願い申し上げます。

Answer 1

問題はcomponentFunctionに独自の有効範囲があることです。あなたはMyComponentに次のメソッドを追加することによって行うことができ、それをバインドする必要があります。

componentWillMount: function() { 
    this.options.componentFunction = this.options.componentFunction.bind(this); 
} 

しかし、自分自身のスコープを定義しない、代わりに矢印の関数を使用するよりよいかもしれなどからthisを継承します親スコープ

options:{ 
    componentFunction:() => console.log(this.props.myProp) 
} 

Answer 2

this.optionsの代わりにthis.options.bind(this)を使用して、機能内のthisにアクセスしてください。

または、ES6の構文 - options =() = {...}を使用してください。