Question

我需要在渲染时为每个孩子设置样式

我的第一个组件是侧边栏

Mainpage.js

<Sidebar>
  <Mycomp>
    <p>one</p>
    <p>two</p>
    <p>three</p>
  </Mycomp>
  <Mycomp postion="bottom">
    <p>one</p>
    <p>two</p>
    <p>three</p>
  </Mycomp>
</Sidebar>

在我的 Sidebar.js 中，我有每个这样的孩子的地图

const test=Children.map((this.props.children, child) => (
  <div className="hello">
    {child}
  </div>
))

但是hello div类仅包含Mycomp组件

我需要将类hello div标记包装到 Sidebar.js

中的每个p

Answer 1

不确定这是否是您想要的。但这是将样式注入Children

的每个组件的方式

const test = Children.map(this.props.children, Component=>(
    <Component className="hello" />
))

Answer 2

const test = this.props.children.map(child => (
     <div className="hello">
         {child}
     </div>
))

Answer 3

const test=Children.map(this.props.children,child=>(
    {Children.map(child.props.children, child=> <div className="hello">{_child}</div>)}
))

尝试一下！

React Map每个孩子并为每个孩子添加CSS样式

3 个答案: