React.js:未接管的连击:最大呼叫堆栈尺寸超过了

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将信息发送到后代组件。但这造成了错误：

未熟练的连击：最大呼叫堆栈大小超过对象。

但是我在演示运行良好后写信，所以你能告诉我是什么原因导致错误？

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

您必须仅克隆一个元素。React.Children是一个阵列

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

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

Answer 2

我在测试后解决了这个问题。

首先，我将问题定位在Father组件中。

其次，错误的信息 Maximum call stack size exceeded总是是由无限创建而无需回收的东西引起的。

所以，我发现 props 我发送到Father的值children是-Father 。

GrandFather有道具：

{
  value: "This is Test",
  children: Father React Element
}

当我使用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>
)