如何将数据传递给 props.children？

Question

对本机反应很新...

我试图遍历我的 this.props.children 以便将一个字符串传递给他们，该字符串在我的父级中定义......这可能没有在渲染方法中定义这些子级吗？

<OwnRenderer passMe = "string...">
    <OwnText/>
</OwnRenderer>

OwnRenderer 应该将 prop-string 传递给它的所有孩子...... OwnRenderer 不知道他要渲染哪些孩子，所以不可能通过“”直接传递道具......

我试图遍历 childs 以直接传递该字符串，但这很遗憾没有奏效。

this.props.children.map((x) => x.passed = this.props.passMe);

不知何故，它只是没有改变状态……你们会如何以一种简单易懂的方式做到这一点？

Answer 1

使用 React 顶级 api：React.cloneElement

定义

interface Props {
  ChildName: React.ReactElement,
}

{React.cloneElement(ChildName, {
  propsName: {
    propsAttr: value,
    propsAttr2: value,
  }
})}

用法

<ParentComponent
  ChildName={
    <YourChildComponent />
  }
/>