从子组件调用父组件上的方法

Question

我正在处理的项目有一个NotificationHeader组件，其中包含用于显示通知的infra。具体来说，它有一个方法

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

页面上的其他组件是此NotificationHeader组件的子组件。我将addNotification方法作为道具传递给子项，以便我可以从它们调用它。

我面临的问题是，当我从子进程调用addNotification方法时，addNotification中对此的引用不是指向NotificationHeader组件，而是指向addNotification。

我从子视图中调用父组件方法的其他示例似乎没有遇到此问题。

我必须提一下，由于项目使用React路由器，要将addNotification方法传递给我使用React.cloneElement的子节点，如下所示：

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

如何让它引用NotificationHeader组件？

Answer 1

我认为您应该使用绑定上下文传递addNotification方法。您可以使用bind执行此操作：

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

或如果您按照提到的方式克隆组件：

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