Question

我需要使用以下函数将函数传递给this.props.children。

updateBarTitle(barTItle){
   this.setState({barTItle});
}
render(){
   const children = React.Children.map(this.props.children, function (child) {
        return React.cloneElement(child, {
            updateBarTitle: this.updateBarTitle
        });
      });
   {children}
}

但我一直在Uncaught TypeError: Cannot read property 'updateBarTitle' of undefined。

另外我想问一下这是最好的方法吗？我的目标是根据子值更新父状态。所以我在想这么做。传递父准备好的功能，然后孩子将更新它，或由父母访问子状态。例子会有很大的帮助。

Answer 1

映射函数中的

this未绑定正确的上下文。您可以通过将this作为第3个参数传递来绑定它：

const children = React.Children.map(this.props.children, function (child) {
    return React.cloneElement(child, {
        updateBarTitle: this.updateBarTitle
    });
}, this);

或使用不窃取上下文的箭头功能：

const children = React.Children.map(this.props.children, (child) => {
    return React.cloneElement(child, {
        updateBarTitle: this.updateBarTitle
    });
});

将函数传递给子组件this.props.children方法undefined

1 个答案: