Javascript React.js:未捕获范围错误：超过最大调用堆栈大小

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

---

只能克隆一个元素。 孩子们是一个数组

---

只能克隆一个元素。 孩子们是一个数组

---

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

首先，我将问题定位在

Father

组件中

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

因此，我发现我发送给

父亲的道具具有
儿童
本身的值-
父亲

祖父
拥有以下道具：

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

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

检查React API后，
.cloneElement
的第三个参数是克隆元素的
子元素

毕竟，我的解决方案是：

const Father = props => <div>{ React.Children.map(props.children, child => React.cloneElement(child, props, child.props.children)) }</div>

const-Father=props=>{React.Children.map（props.Children，child=>React.cloneElement（child，props，child.props.Children））}

整个演示将在以下步骤之后进行：

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

const CloneProps2Children=props=>{React.Children.map（props.Children，child=>React.cloneElement（child，props，child.props.Children））}
const Child=props=>console.log（props.value）}>单击以查看值。
导出默认值(
)
经过测试，我解决了这个问题

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

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

因此，我发现我发送给
父亲的道具具有
儿童
本身的值-
父亲

祖父
拥有以下道具：

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

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

检查React API后，
.cloneElement
的第三个参数是克隆元素的
子元素

毕竟，我的解决方案是：

const Father = props => <div>{ React.Children.map(props.children, child => React.cloneElement(child, props, child.props.children)) }</div>

const-Father=props=>{React.Children.map（props.Children，child=>React.cloneElement（child，props，child.props.Children））}

整个演示将在以下步骤之后进行：

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

const CloneProps2Children=props=>{React.Children.map（props.Children，child=>React.cloneElement（child，props，child.props.Children））}
const Child=props=>console.log（props.value）}>单击以查看值。
导出默认值(
)
在我更改为使用
React.Children.map（）
渲染子元素后，仍然存在相同的问题。T T在我更改为使用
React.Children.map（）
渲染子元素之后，仍然存在相同的问题。当一个组件有一个子组件作为道具时，在JSX中也有子组件。组件中的
props.children
将显示您设置的道具。
React.js
能否给出一些解决方案来实现这两者？关键是
的第三个参数。cloneElement
是新元素的
子元素
。当一个组件有一个子元素作为道具时，JSX中也有子组件。组件中的
props.children
将显示您设置的道具。
React.js
能否给出一些解决方案来实现两者？关键是
的第三个参数。cloneElement
是新元素的
子元素。