如何將道具傳遞給React.cloneElement的孩子？

我試圖將道具傳遞給我的子組件，但是我有這個錯誤：標記上的未知道具'user'。從元素中刪除此道具。如何將道具傳遞給React.cloneElement的孩子？

在查看文檔和問題時，我想我明白給React.cloneElement（第二個參數）的道具必須是DOM認可的屬性。

所以我的問題是如何將道具傳遞給子組件並使它們在this.props中可訪問？

這裏是我的代碼：

render() { 

    const { children } = this.props 
    const { user } = this.state 

    const childrenWithProps = React.Children.map(children, child => 
     React.cloneElement(child, { user })  
    ) 

    return (
     <div> 
      { childrenWithProps } 
     </div> 
    ) 
}

編輯：孩子組件的propTypes

ChildrenPage.propTypes = { 
    user: PropTypes.object 
} 

export default ChildrenPage

來源

2017-09-27 OhmWang

你能粘貼'ChildrenPage'的聲明嗎？。我是一個非常確定的錯誤是在ChildrenPage組件中。 – Tomasz

確保你沒有傳下來的孩子鍵道具。在將代碼傳遞給孩子之前，下面的代碼將兒童的鑰匙從道具上移除。

let key = 'children'; 
let {[key]: _, ...newProps} = state; 
{React.Children.map(this.props.children, child => 
    React.cloneElement(child, {...newProps}))}

這是可能的原因之一。並且讓我知道這個解決方案是否有效。 https://facebook.github.io/react/warnings/unknown-prop.html

來源

2017-09-27 10:19:26

在我的代碼中，我試圖傳遞一個新創建的對象'{user}'而不引用父對象。另外，並且與鏈接的文檔相關，我甚至嘗試克隆「用戶」對象'React.cloneElement（child，{user：Object.assign（{}，user）}）'，但仍然有道具錯誤「div」中的「user」。 – OhmWang

@OhmWang您是否提到了子組件的PropTypes？並且，它們是否與{user} –

匹配我試圖在子組件上添加propTypes，但是錯誤依然存在。你可以在我的初始文章編輯中看到它。 – OhmWang

您的代碼對我來說很不錯。通常，當您嘗試使用無效/非標準DOM屬性呈現DOM元素（不是React組件）時，React會發出此警告。

就你而言，如果你的children集合有一個DOM元素，可能會發生這種情況。由於user不是標準的DOM屬性，因此在嘗試使用user prop來克隆元素時，可能會觸發此警告。

您可以閱讀更多關於此錯誤的信息here。

希望這會有所幫助！

來源

2017-10-02 17:15:39

如何將道具傳遞給React.cloneElement的孩子？

回答

相關問題