Question

我有一个代表自定义React组件的键列表。根据这个列表，我想渲染适当的组件。我有一个对每个组件的引用，所以我可以创建一个key -> Component的映射，它允许我创建一个组件列表。但是我还没有找到一种方法来呈现这个列表。

示例：

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

output:
<ComponentA />
<ComponentB />
<ComponentC />

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

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

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

  return (
    <div>
      {componentsToRender}
    </div>
  );
}

Answer 1

对我有用的是什么：

render() {
  const components = [ComponentA, ComponentB, ComponentC] // references to components
  return (
    <div>
      {components.map((comp, i) => React.createElement(comp, { key: i})}
    </div>
  );
}

由于嵌套JSX的问题（可能与Typescript相关），必须使用对组件的引用并且必须使用React.createElement。

Answer 2

试试这个。它应该工作。

 render()
    {
      const input=["ComponentA", "ComponentB", "ComponentC"]

       return(
             <div>
               {
                  input.map((comp,i)=>){
                      return <{comp} key={i} />
                    }
                }
             </div>

        )
    }

注意：输入= [＆＃34; ComponentA＆＃34;，＆＃34; ComponentB＆＃34;，＆＃34; ComponentC＆＃34;];自定义组件名称应在Capital
中

Answer 3

render() {
    return (
       <div>
          {componentsToRender.map((Component, key) => (<Component key={key}/>))}
       <div>
    );
  }

Answer 4

由于某种原因，使用React documentation中指定的map函数对我不是li的任何组件/元素都不起作用，我必须明确指定一个return语句。

options = optionsArray.map(o => {
    // replace option with your component name
    return <option key={o.name} value={o.name}>{o.name}</option>
})

然后我渲染了生成的元素。如果需要，您也可以内联。

<div>
    {options}
</div>

React - 渲染动态组件列表

4 个答案: