Question

所以我想将某些样式添加到附加到组件的任何子项。假设父组件名为Section，在这种情况下，子组件称为Card。在Section.js我正在尝试这个： -

renderChildren = () =>{
  return React.Children.map(this.props.children, (child, i)=>{
    let el = React.cloneElement(child,{
      style: {opacity:0.5}
    })
    return el
  })
}

render(){
  <ScrollView>
       {this.renderChildren()}
   </ScrollView>
}

上述方法对我不起作用。我想知道为什么。还有一种方法可以映射孩子并将它们包装在一个新的组件中吗？像这样的东西;

this.props.children.map(Child => <Wrapper> <Child/> </Wrapper> )

Answer 1

要将子项包装到包装器中，只需将对const OpaqueWrapper = ({ children }) => ( // check that children is defined // if you do not want your wrapper to be rendered empty children && ( <Wrapper> {React.Children.map(children, child => ( React.cloneElement(child, {style: {...child.props.style, opacity: 0.5}}) ))} </Wrapper> ) );的调用放入包装器组件中：

<Card>

另请注意，您必须将提供给原始孩子的样式与注入的样式合并，否则您将无法为孩子设置样式。

See this codesandbox是一个有效的例子。

至于为什么它在你的代码中不起作用：你确定你的style组件确实正确地处理了React.Children.map道具，即将它应用于它的孩子吗？

修改：

sloution将所有子组件包装在一个包装器中，但是我我想用应用的包装器包装每个子节点，如图所示我的问题。

将包装器移到const OpaqueWrapper = ({ children }) => ( React.Children.map(children, child => ( <Wrapper> {React.cloneElement(child, {style: {...child.props.style, opacity: 0.5}})} </Wrapper> ))) );：

[0-9]+

Answer 2

我认为这种解决方案对于包裹每个孩子来说是最简单的。呈现子级时，您将收到组件的实例，而不是组件功能。只需将实例包装到wrapper组件中，如下所示。

this.props.children.map(Child => <Wrapper>{Child}</Wrapper> )

React：映射父组件的子项

2 个答案: