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コンポーネントの質問に答えます。

第2に、間違った情報Maximum call stack size exceededは、常に無限に何かをリサイクルなしで作成することによって引き起こされます。

だから、私は私がFatherに送る値childrenが自身である持っていることを小道具を発見した - Father。

GrandFatherは小道具を持っています

​​

私も父のコンポーネントに送信されReact.cloneElement(child, props)、the props.children = Father React Elementを使用する場合。

React APIを確認した後、.cloneElementの3番目のパラメータは、クローンされた要素のchildrenです。結局のところ

は、私の解決策は次のとおりです。私は子供の要素をレンダリングするために `` React.Children.map（）を使用するように変更した後

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

要素を1つだけ複製する必要があります。 React.Childrenは、私はいくつかのテストの後に、この問題を解決するためのアレイ

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

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