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] 
    )