React.js：未捕獲的RangeError：最大調用堆棧大小超過

Question

React.js使用道具送值後代組件錯誤

const Child = props => <div onClick={ e => console.log(props.value) }>Click to see value.</div> 
const Father = props => <div>{ React.cloneElement(props.children, props) }</div> 
const GrandFather = props => <div>{ React.cloneElement(props.children, props) }</div> 

ReactDOM.render(
    <GrandFather value="This is Test"> 
    <Father> 
     <Child /> 
    </Father> 
    </GrandFather>, 
    document.getElementById('root') 
) 

我寫以前的演示，測試使用props發送信息，以後代？零件。但它造成了錯誤：

Uncaught RangeError: Maximum call stack size exceeded at Object.ReactElement.cloneElement

但是我在演示程序運行良好後編寫，所以能否告訴我是什麼原因導致錯誤？

const Child = props => <div onClick={ e => console.log(props.value) }>Click to see value.</div> 
const Father = props => <div>{ React.cloneElement(props.children, props) }</div> 

ReactDOM.render(
    <Father value="This is Test"> 
    <Child /> 
    </Father>, 
    document.getElementById('root') 
) 

Answer 1

我解決這個問題的一些試驗之後。

首先，我將問題定位在Father組件中。

其次，錯誤的信息Maximum call stack size exceeded總是由無限創建的東西造成的，而不是回收。

於是，我找到了道具是我送Father具有價值children本身 - Father。

GrandFather有道具：

​​

當我使用React.cloneElement(child, props)，the props.children = Father React Element也被髮送到父組件。

當我檢查React API後，.cloneElement的第三個參數是children的克隆元素。

的畢竟，我的解決辦法是：

const Father = props => <div>{ React.Children.map(props.children, child => React.cloneElement(child, props, child.props.children)) }</div> 

整個演示是後：

const CloneProps2Children = props => <div>{ React.Children.map(props.children, child => React.cloneElement(child, props, child.props.children)) }</div> 
const Child = props => <div onClick={ e => console.log(props.value) }>Click to see value.</div> 

export default (
    <CloneProps2Children value="This is test for many middles"> 
    <CloneProps2Children> 
     <CloneProps2Children> 
     <Child></Child> 
     </CloneProps2Children> 
    </CloneProps2Children> 
    </CloneProps2Children> 
) 

Answer 2

您只能克隆一個元素。 React.Children是一個數組

https://facebook.github.io/react/docs/react-api.html#cloneelement

React.cloneElement(
     element, 
     [props], 
     [...children] 
    )