反应js:Uncaught RangeError:超出最大调用堆栈大小

Question

React.js用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>
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

经过一些测试，我解决了这个问题。

首先，我在< code >父亲组件中定位问题。

其次，错误的信息超过了最大调用堆栈大小总是由无限创建而没有回收造成的。

因此，我发现我发送给< code >父亲的道具具有值< code >孩子本身就是< code >父亲。

< code >祖父有道具:

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

当我使用React时。cloneElement（child，props），props。children=父反应元素也发送到父组件。

在我检查了 React API 之后，.clone 元素的第三个参数是克隆元素的子元素。

毕竟，我的解决方案是:

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