使用递归在运行时从json动态创建react组件

Question

我正在尝试创建类似Wix的功能，在Wix中，可以拖放小部件，并调整其属性以创建独特的布局。出于这个原因，我将小部件存储为嵌套的json文档，我希望使用它在运行时动态创建反应组件树

nestedJson = [{
"_uid": "gbKyzEom", 
"component": "div", 
"children": [{
"_uid": "hrykbdm", 
"component": "span"
}, {
"_uid": "opeFbVcd", 
"component": "h1"
}]
}]

我已经设法创建了一个中间json表示，在这里我能够表示到组件深度以及它与父组件的关系。例如：

depthInfo = [{1 : {params: ['div', null], Id: "gbKyzEom"}}, {2: {params: ["span", null], id: "hrykbdm", parentId:"gbKyzEom" }},  {2: {params: ["h1", null], id: "opeFbVcd", parentId:"gbKyzEom" }} ]

我想使用递归使用depthInfo创建组件树，就像一样

React.createElement.apply(null, ['div', null, React.createElement.apply(null, ['span', null]), React.createElement.apply(null, ['h1', null])]) 

Answer 1

如果我读得正确，这可能很简单，如下所示：

// dummy for testing -- just creates a string
const React = {createElement: (tag, props, children) => `<${tag}>${children.join('')}</${tag}>`}
const reactify = components => components .map (
({component, children = [], ...rest}) =>
// do something with other properties?
React .createElement (component, null, reactify (children))
)
const components = [{_uid: "gbKyzEom", component: "div", children: [{_uid: "hrykbdm", component: "span"}, {_uid: "opeFbVcd", component: "h1"}]}]
console .log (reactify (components))

我们的输入与它的(递归(children节点的格式完全相同，所以我们有一个简单的递归。

我在这里摆了一下React，但真正的东西应该没有太大区别。当然，这会返回一个React组件数组(或填充程序中的字符串(，因此可能需要将结果封装在一个容器中。

我不认为任何事情都需要您的depthInfo中间数据，但也许我遗漏了一个微妙之处。