使用流式手动创建react元素Object

Question

是否可以手动创建react元素对象而无需使用react.createElement。

这个想法是在从html流式传输时创建嵌套的react元素树。问题是我在流媒体中没有意识到嵌套的孩子。

我的目标是能够从嵌套对象创建一个react元素。即：

{
   "tag": "div",
   "attribs": {},
   "children": [
      {
         "tag": "p",
         "attribs": {},
         "children": [],
         "text": "test"
      },
      {
         "tag": "div",
         "attribs": {},
         "children": [
            {
               "tag": "p",
               "attribs": {},
               "children": [],
               "text": "hi"
            }
         ]
      }
   ]
}

Answer 1

您也可以使用React.createElement创建嵌套组件，但需要遵循特殊语法才能实现。

tag需要type而attribs需要props，但您可以迭代您的对象并根据需要重命名这些密钥，这样就不是问题了

现在有这样的事情：

var data = {
   "type": "div",
   "props": {anyProp: true},
   "children": [
      {
         "type": "p",
         "props": {},
         "children": [],
         "text": "test"
      },
      {
         "type": "div",
         "props": {},
         "children": [
            {
               "type": "p",
               "props": {},
               "children": [],
               "text": "hi"
            }
         ]
      }
   ]
}

您可以使用React.createElement(data.type, data.props, data.children);创建一个包含所有子项，属性等的组件。