什麼時候應該使用React.cloneElement vs this.props.children？

我仍然是React的小老鼠，在互聯網上的很多例子中，我看到了這種變化，在渲染子元素時我感到困惑。通常我看到這一點：什麼時候應該使用React.cloneElement vs this.props.children？

class Users extends React.Component { 
    render() { 
    return (
     <div> 
     <h2>Users</h2> 
     {this.props.children} 
     </div> 
    ) 
    } 
}

但後來我看到這樣一個例子：

<ReactCSSTransitionGroup 
    component="div" 
    transitionName="example" 
    transitionEnterTimeout={500} 
    transitionLeaveTimeout={500} 
    > 
    {React.cloneElement(this.props.children, { 
     key: this.props.location.pathname 
     })} 
</ReactCSSTransitionGroup>

現在我明白了API，但docs不完全清楚的時候，我應該使用它。

那麼其他人不能做什麼？有人可以用更好的例子向我解釋這一點嗎？

來源

2016-05-30 Amit Erandole

https://www.youtube.com/watch?v=hEGg-3pIHlE這傢伙正在展示他如何使用cloneElement。看看這個例子 – yuyokk

首先，React.cloneElement示例僅適用於您的孩子是單個React元素的情況。

幾乎所有的東西{this.props.children}是你想要的。克隆在一些更高級的場景中非常有用，其中父級發送元素並且子組件需要更改該元素上的某些道具或添加諸如ref來訪問實際DOM元素等內容。

在上面的例子中，給孩子的父母不知道組件的關鍵要求，因此它創建了它給出的元素的副本，並根據對象中的某個唯一標識符添加一個關鍵字。欲瞭解更多信息什麼關鍵的作用：https://facebook.github.io/react/docs/multiple-components.html

來源

2016-05-30 09:49:34

基本上只要你需要在30天內做出功能動態變化子元素的道具。

由於return this.props.children沒有什麼比呈現父節點（消費者）提供的反應節點更多。不過，有時我們（製片人）要封裝更多的邏輯成子元素（相反渲染道具這將產生控制對消費者），例如，react-router switch，或附加處理程序來更新活動列表項目，但

反應的元素是不可改變的。

的性能問題，所以我們需要使用cloneElements幾乎等同於：

<element.type {...element.props} {...props}>{children}</element.type>

來源

2018-02-19 08:25:41 Xlee

什麼時候應該使用React.cloneElement vs this.props.children？

回答

相關問題