如何将 React Fragment 转换为数组?

尼尔·O。

我正在使用一个外部库 Carousel,它期望它的子库由传递给它的 react 组件数组组成,即:

<Carousel>
  <Component1/>
  <Component2/>
  <Component3/>
</Carousel>

我还使用了一个组件,它返回一个反应片段,其中填充了我想传递给该 Carousel 组件的组件。我想到的解决方案是将该片段转换为数组。有没有办法做到这一点?

例如,我想把这个

<>
    <Component1/>
    <Component2/>
    <Component3/>
</>

对此

[<Component1/>, <Component2/>, <Component3/>]

然后,剩下的就是在输入上运行 map() 。

jnpdx

一些粗略的实验让我发现你可以使用fragment.props.children,然后可以映射。请参阅以下超基础示例:

export default function App() {
  const myFragment = <>
     <span>1</span><span>2</span>
  </>;

  return (
    <div>
      {myFragment}
      {myFragment.props.children
          .map(i => <div style={{fontWeight: "bold"}}>{i}</div>)
      }
      <span>Hello</span>
    </div>
  );
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章