如何使用完全可配置的JSON数据创建动态布局
我正在编写一个react应用程序。一个核心要求是应用程序必须是完全动态的和可配置的，包括选择布局、区段和字段、验证等。我有两个UI。一个是配置UI，用户可以在其中选择布局、部分、字段，比如哪些类型的html组件等等。一旦保存了这些内容，我就会得到JSON格式的数据，在这里我需要绘制UI。这是我的第二个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上以不同的方式呈现这些部分和字段？
回答 2
Stack Overflow用户
发布于 2022-08-11 11:51:43
我认为你的问题给我们留下了许多未具体说明的问题，可以为你提供一个适当的解决办法。我的建议是更好地调查项目的实际需求及其主要目标，然后在提出任何实现之前，详细地列出每个部分(组件)，检查什么应该是“可配置的”以及在多大程度上是可配置的。
以您的“原样”为例，我的第一个想法是将您的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更新元数据并传播更改。
例如，使用如下：
function LayoutTogglerButton() {
return (
<LayoutContext.Consumer>
{({ layout, toggleLayout }) => (
<button
onClick={toggleLayout}
style={{ backgroundColor: layout.background }}>
Toggle Layout
</button>
)}
</LayoutContext.Consumer>
)
}再一次，你的要求中有很多不明确的地方，希望我们能更具体一些。请求“应用程序完全动态和可配置，包括选择布局、区段和字段、验证等”可能意味着许多事情。
更具体问题的例子:如何创建动态形式与功能组件的反应？如何创建拖拽仪表板小部件与反应？如何使用styled-components实时更新/自定义主题
也许你能说得更具体些？干杯
Stack Overflow用户
发布于 2022-10-18 11:40:57
我正在研究做类似事情的可能性。草率的方法看起来有点像这样：https://codesandbox.io/s/still-sun-cecudh?file=/src/App.js
当然，在哪里将生成布局对象，解析将在何处进行，将取决于您的用例。我将介绍用于布局对象生成的上下文和用于对象树遍历的专用组件。
https://stackoverflow.com/questions/73242711
复制相似问题
腾讯云开发者
