开发者问题收集

React.js：未捕获的 RangeError：超出最大调用堆栈大小

2017-04-24
1222
javascript reactjs

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

我写了前面的 demo 来测试使用 props 向子组件传递信息，但是报错：

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

但是我后面写的 demo 运行正常，能告诉我是什么原因导致的吗？ 

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')
)
2个回答

您必须仅克隆一个元素。 React.Children 是一个数组

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

   React.cloneElement(
      element,
      [props],
      [...children]
   )
kosiakMD
2017-04-24

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

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

其次，错误信息 Maximum call stack size reached 总是由于无限创建某些东西而没有回收而导致的。

因此，我发现 我发送给 Father 的 props 具有值 children 本身 - Father 。

GrandFather 具有以下 props： 

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

当我使用 React.cloneElement(child, props) 时， props.children = Father React Element 也会发送给 Father 组件。

在我检查 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>
)
tomision
2017-04-24