渲染反应组件，基于其他文件选项

Question

我有一个 templates.js 文件，我在其中手动设置值：

export const galleries = [{name:'default'},{name:'carousel'},{name:'grid',set:true}];

如果对象包含 {set:true} 我想在 product.js 页面上呈现特定组件。

我在想：

const gallery = galleries.find(gallery=>gallery.set==true).name

然后渲染：

<div>
  gallery == "grid" ? (
    <Grid />
  ) : gallery == "carousel" ? (
    <Carousel />
  ) : (
    <Default />
  )
</div>

不过有点乱...

是否有更好的方法或者是否已经有一个包可以做到这一点？

Answer 1

const Component = {
    grid: <Grid />,
    carousel: <Carousel />,
    default: <Default />
}

选项 1：

渲染：

<div>
  {Component[gallery]}
</div>

选项 2：

我建议您验证图库，因为查找功能可能 returns null:

const item = galleries.find(gallery=>gallery.set==true);
const gallery = item ? item.name : "default";

然后：

<div>
  {Component[gallery]}
</div>

Render react component, based from other file option