Javascript React：映射父组件的子组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49496906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React: Mapping children of a parent component
提问by Anish K.
So I want to add certain styles to any child that's appended to a component. Let's say the parent component is called Sectionand children are called Cardin this case. in Section.jsI am trying this: -
所以我想向附加到组件的任何子项添加某些样式。假设在这种情况下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>
}
The above approach doesn't work for me. And I would like to know why. Also is there a way where I could map across the children and wrap them in a new component? Something like this;
上述方法对我不起作用。我想知道为什么。还有一种方法可以让我映射孩子并将它们包装在一个新组件中吗？像这样的东西；
this.props.children.map(Child => <Wrapper> <Child/> </Wrapper> )
回答by trixn
To wrap your children into a wrapper just put the call to React.Children.mapinto the wrapper component:
要将您的孩子包装到包装器中，只需将调用React.Children.map放入包装器组件中：
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>
)
);
Also note that you have to merge the styles provided to the original child with the styles injected or you will lose the ability to style the children at all.
另请注意，您必须将提供给原始子项的样式与注入的样式合并，否则您将完全失去为子项设置样式的能力。
See this codesandboxfor a working example.
As to why it did not work in your code: Are you sure that your <Card>component does handle the styleprop correctly, i.e. applying it to it's children?
至于为什么它在您的代码中不起作用：您确定您的<Card>组件确实style正确处理了道具，即将它应用到它的孩子吗？
EDIT:
编辑：
The sloution wraps all children components in a single wrapper, but I would like to wrap each child with the applied wrapper , as shown in my question.
sloution 将所有子组件包装在一个包装器中，但我想用应用的包装器包装每个孩子，如我的问题所示。
The just move the wrapper into React.Children.map:
只需将包装器移动到React.Children.map：
const OpaqueWrapper = ({ children }) => (
React.Children.map(children, child => (
<Wrapper>
{React.cloneElement(child, {style: {...child.props.style, opacity: 0.5}})}
</Wrapper>
)))
);
回答by Igor Stetsiura
I think this solution is the simplest for wrap every child. When the children are rendered, you receive an instance of the component, not the component function. And you just need to wrap the instance into the wrapper component as shown below.
我认为这个解决方案对于包裹每个孩子来说是最简单的。渲染子项时，您会收到组件的实例，而不是组件功能。您只需要将实例包装到包装器组件中，如下所示。
this.props.children.map(Child => <Wrapper>{Child}</Wrapper> )
