如何创建动态布局以响应完全可配置的 JSON 数据

Question

我正在编写一个反应应用程序。核心要求是应用程序完全动态且可配置，包括选择布局、部分和字段、验证等。我有两个 UI。一个是配置 UI，用户可以在其中选择布局、部分、字段（例如 html 组件的类型等）。保存后，我将获取 JSON 数据，需要在其中绘制 UI。这是我的第二个用户界面。我关心的是如何构建组件以使用 JSON 数据呈现 UI。字段和部分将相同，但布局将根据配置 UI 中的选择而有所不同。下面是粗略的 JSON 架构。

{
  title: "Test title",
  layout: [
    {
      name: "layout-a"
    },
    sectionA: {
      name: "breadcrumbs"
      field: [
        {
          name: "test",
          value: "test",
          type: "text"
        }
      ]
    },
    sectionB: {
      name: "actions"
      field: [
        {
          name: "Create",
          value: "Create",
          type: "button"
        }
      ]
    }
  ]
}

我正在考虑使用一个布局组件来渲染 JSON 中的所有子组件。组件如下所示

const Layout = ({ children }) => {
  return (
    <div>
      <div className="container">
        <div className="content">{children}</div>
      </div>
    </div>
  );
};

以及顶级组件，我们在其中读取配置 json 并根据布局渲染组件

<Layout>
      {viewToShow === "layoutA" && <LayoutA data={config.sections} />}
      {viewToShow === "layoutB" && <LayoutB data={config.sections} />}
</Layout>

我的问题是如何构造 LayoutA、B 或 C 组件，以便这些部分和字段在 UI 上以不同方式呈现？

Answer 1

我认为您的问题留下了很多未明确的点，需要我们为您提供适当的解决方案。我的建议是更好地调查项目的真正需求是什么及其主要目标，然后在提出任何实施之前，彻底检查每个部分（组件）应该是“可配置的”以及“可配置的程度”。

以“按原样”为例，我的第一个想法是将您的App组件包装到Context提供程序中，类似于我们管理主题的做法。

export const layouts = {
  layoutA: {
    background: '#fff',
    sectionWidth: '100%',
  },
  layoutB: {
    background: '#000',
    sectionWidth: '50%',
  },
};

export const LayoutContext = React.createContext({
  layout: layouts.layoutA, // default layout
  toggleLayout: () => {},
})

然后，您可以layouts使用数据库中的元数据进一步填充该对象。假设更改不是源自 UI（例如 Webflow 或 Wix 编辑器），您可以使用 CMS 来更新元数据并传播更改。

一个示例用法是：

export const layouts = {
  layoutA: {
    background: '#fff',
    sectionWidth: '100%',
  },
  layoutB: {
    background: '#000',
    sectionWidth: '50%',
  },
};

export const LayoutContext = React.createContext({
  layout: layouts.layoutA, // default layout
  toggleLayout: () => {},
})

再次强调，您的要求中有很多未明确的地方，需要我们提供更具体的信息。“应用程序完全动态且可配置，包括选择布局、部分和字段、验证等”的请求可能意味着很多事情。

更具体问题的示例：如何使用功能组件在 React 中创建动态表单？如何使用 React 创建拖放仪表板小部件？如何实时更新/自定义主题styled-components？

也许你可以更具体一些？干杯