reactjs 传递组件数组

Question

我正在尝试将一组组件传递给另一个组件并在添加其他 Prop 后渲染它们

import {ComponentB} from ".../ComponentB";


<ComponentA 
    list={[
       <ComponentB title={'title 1'} />,
       <ComponentB title={'title 2'} />,
       <ComponentB title={'title 3'} />
    ]} />

如何循环 ComponentA 中的 list 属性？这行不通:

//组件A

    { list.map((Item, index) => {
        return (
            <Item otherProps={'value xxx'}/>
        )
    })}         

这个可以，但是不能加props

    { list.map((Item, index) => {
        return (
            {Item}
        )
    })} 

Answer 1

只传递组件，不要在父组件中调用组件:这样，ComponentA 可以使用所有需要的属性调用组件:

<ComponentA 
    list={[
       { Comp: ComponentB, title: 'title 1' },
       { Comp: ComponentB, title: 'title 2' },
       { Comp: ComponentB, title: 'title 3' },
    ]}
/>

// ComponentA
{ list.map(
  ({ Comp, title }, index) => <Comp title={title} otherProps={'value'} />
)}