反应：映射父组件的子级

Question

因此，我想向附加到组件的任何子级添加某些样式。假设父组件称为节，子组件称为卡。在部分。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

这里是您编写属性时的Typescript版本：

  const mapped = Children.map(children, (child, index) => {
    if(React.isValidElement(child)) {
      return React.cloneElement(child, {
        ...child.props,
        isFirst: index === 0,
        isLast: !Array.isArray(children) || index === children.length - 1,
      })
    }
    return null
  })

Answer 2

我认为这个解决方案对每个孩子来说都是最简单的。渲染子对象时，将接收组件的实例，而不是组件函数。您只需要将实例包装到包装器组件中，如下所示。

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

对于TypeScript：

React.Children.map(props.children, child => {
  return <Wrapper>{child}</Wrapper>
})

Answer 3

要将您的孩子包装到包装器中，只需调用React即可。儿童将映射到包装器组件中：

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

还请注意，必须将提供给原始子级的样式与注入的样式合并，否则将完全失去为子级设置样式的能力。

请参阅此代码沙盒以了解工作示例。

至于为什么它在您的代码中不起作用：您确定您的

编辑：

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

只需将包装器移动到React即可。儿童地图：

const OpaqueWrapper = ({ children }) => (        
    React.Children.map(children, child => (
       <Wrapper>
           {React.cloneElement(child, {style: {...child.props.style, opacity: 0.5}})}
       </Wrapper>
    )))
);