如另一个问题所示，可以使用 React.Children 遍历子元素。地图。我正在寻找一种递归遍历子树（props.children.props.children...）并用另一种类型的元素替换某些元素的方法。它会发生在高阶组件的渲染函数中。
非常感谢任何帮助和想法！
React - 替换 props.children 中的子组件
IT技术
reactjs
2021-05-15 14:19:45
1个回答
您可以构建一个递归包装器组件来替换它拥有的任何子代并以相同的方式包装其子代。替换将继续递归，直到子元素不再有子元素。
这是此类组件的示例。它用<p>元素替换<span>元素。
const RecursiveWrapper = props => {
const wrappedChildren = React.Children.map(
props.children,
child => {
const type = child.type === 'p' ? 'span' : child.type
if (child.props && child.props.children) {
return React.cloneElement(
{
...child,
type // substitute original type
},
{
...child.props,
// Wrap grandchildren too
children: (
<RecursiveWrapper>
{child.props.children}
</RecursiveWrapper>
)
}
)
}
return child
}
)
return (
<React.Fragment>
{wrappedChildren}
</React.Fragment>
)
}
您也可以使用相同的一般想法来注入额外的props。