子コンポーネントから親コンポーネントのメソッドを呼び出す

Question

私が取り組んでいるプロジェクトには、通知を表示するためのインフラストラクチャを持つNotificationHeaderコンポーネントがあります。具体的には、メソッドを持ちます

addNotification(msg,type) { 
    console.log('addNotification.this:%O',this); 
    // rest of the method to show notification. 
} 

残りのコンポーネントはこのNotificationHeaderコンポーネントの子です。 addNotificationメソッドを子供に小道具として渡しているので、私はそれを呼び出すことができます。

私が直面している問題は、子からaddNotificationメソッドを呼び出すと、addNotification内のthisへの参照がNotificationHeaderコンポーネントを指しているのではなく、addNotificationです。

私は子から親コンポーネントのメソッドを呼び出すために見てきた他の例では、この問題に直面していないようです。

私はプロジェクト以来、次のように私はReact.cloneElementを使用しています子供までaddNotificationメソッドを渡すために、ルータに反応使用していることを言及する必要があります：

{React.cloneElement(this.props.children, { 
    addNotification: this.addNotification, 
})} 

は、どのように私はこれがNotificationHeaderを参照するために取得することができます成分？

Answer 1

addNotificationメソッドをバインドされたコンテキストで渡す必要があると思います。

<SomeChildComponent addNotification={this.addNotification.bind(this)} /> 

をしたり、コンポーネントのクローンを作成する場合は、前述のように：あなたはこれを行うにはbindを使用することができます

{React.cloneElement(this.props.children, { 
    addNotification: this.addNotification.bind(this) 
})}