javascript - 动态选择 React 组件并将数据应用为 props

Question

我是 React 新手，我很确定这是可以完成的，但我不确定语法。

# pseudo code
const components = [
    {component: <A />, type: "type_a"}, 
    {component: <B />, type: "type_b"}, 
    {component: <C />, type: "type_c"}
];

const Wrapper = ({type, data}) => {
   const component = _.find(components, (c) => c.type === type);
   return (
       <component data={data} />
   )
}

Answer 1

  const componentsArr = [
    {component: A, type: "type_a"}, 
    {component: B, type: "type_b"}, 
    {component: C, type: "type_c"}
 ];

const Wrapper = ({type, data}) => {
 const index = componentsArr.findIndex((c) => c.type === type);
 if(index  > -1) {
   let DupComp = componentsArr[index].component;
   return <DupComp data={data}/>
 } else {
   return (
   <div>Not found this type</div>
  )
 }
}