时间戳

首页 > 解决方案 > NextJS 中的 CMS 驱动组件

javascript - NextJS 中的 CMS 驱动组件

问题描述

目前有一个包含多个页面的 NextJS 站点。每个页面可以具有任意顺序的多个组件。这些组件由最终用户选择的 CMS 驱动。

例如，他们可以有一个轮播，然后是一个网格，然后是段落组件。

每个页面我都会获得初始道具，其中将包含该页面的组件列表以及每个组件的数据。

Page1.getInitialProps = async () => {
   const res = await fetch('some api')
   const json = await res.json()
   return { data: json }
}

这最终到达顶级父组件，该组件查看数据并使用 switch 语句在页面上呈现适当的子组件

renderWidgets = (data) => {
  const pageWidgets = data.widgets.map((widget) => {
    switch(widget.type) {
      case WIDGETS.CAROUSEL:
        return <Carousel />;
      case WIDGETS.GRID:
        return <Grid />;
      case WIDGETS.PARAGRAPH:
        return <Paragraph />;
      default:
        return <div />;
    }
  });

  return pageWidgets;
}

render() {
  return (
    <div className="layout__main">
      {this.renderWidgets()}
    </div>
  );
}

我的问题是是否有更好的方法来处理这个渲染组件过程。每次创建一个全新的小部件时，我都必须确保更新 switch 语句。有没有更好的方法在页面上呈现动态 CMS 驱动的组件？

标签： javascriptreactjsnext.js

解决方案

推荐阅读