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

我有一个

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>

画廊==“网格”？(
)：画廊==“旋转木马”？(
) : (
)

但是有点乱

是否有更好的方案，或者已经有这样的方案

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

然后：

{组件[gallery]}

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

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

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