將函數傳遞給子組件this.props.children方法undefined

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你的映射函數沒有綁定正確的上下文。

不偷方面

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

或使用箭頭功能：你可以通過this爲3擋的參數綁定它

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