我正在使用一个外部库 Carousel,它期望它的子库由传递给它的 react 组件数组组成,即:
<Carousel>
<Component1/>
<Component2/>
<Component3/>
</Carousel>
我还使用了一个组件,它返回一个反应片段,其中填充了我想传递给该 Carousel 组件的组件。我想到的解决方案是将该片段转换为数组。有没有办法做到这一点?
例如,我想把这个
<>
<Component1/>
<Component2/>
<Component3/>
</>
对此
[<Component1/>, <Component2/>, <Component3/>]
然后,剩下的就是在输入上运行 map() 。
一些粗略的实验让我发现你可以使用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] 删除。
我来说两句