React-渲染动态组件列表

我有一个代表自定义React组件的键列表.根据这个列表,我想渲染适当的组件.我有一个对每个组件的引用,因此我可以创建一个key -> Component允许我创建组件列表的映射.但是我还没有找到渲染这个列表的方法.

例.:

input: ["componentA", "componentB", "componentC"]

output:

这是我到目前为止所得到的,但是我不确定如何呈现组件列表:

function renderElements(keys) {
  const compOnents= {
    componentA: ComponentA,
    componentB: ComponentB,
    componentC: ComponentC,
  };

  const compOnentsToRender= keys.map(key => components[key]);

  return (
    

      {componentsToRender}
    
  );
}

fwind.. 5

什么对我有用:

render() {
  const compOnents= [ComponentA, ComponentB, ComponentC] // references to components
  return (
    

      {components.map((comp, i) => React.createElement(comp, { key: i})}
    
  );
}

不得不使用对组件的引用而不得不使用React.createElement由于嵌套JSX的问题(可能与Typescript相关).

什么对我有用:

render() {
  const compOnents= [ComponentA, ComponentB, ComponentC] // references to components
  return (
    

      {components.map((comp, i) => React.createElement(comp, { key: i})}
    
  );
}

不得不使用对组件的引用而不得不使用React.createElement由于嵌套JSX的问题(可能与Typescript相关).