reactjs - 如何返回反应组件列表

Question

我试图返回一个组件列表。我尝试使用

const list = [Comp1, Comp2, Comp3] 
const RenderComps = () => {
    return(
        {list.map((comp)=>`<${comp}/>`)}
    )
}

但是我无法正确渲染组件。我知道我不能自己调用​​ react 组件，即只是替换{list.map((comp)=>comp)}.

标签： reactjs

Answer 1

给定组件数组：

const list = [Comp1, Comp2, Comp3];

然后渲染你会将它们渲染为 JSX，而不是字符串文字。还记得 React 组件是PascalCased：

const RenderComps = () => {
  return list.map((Comp) => <Comp />);
};

用户定义的组件必须大写