reactjs - 使用流式处理手动创建React元素对象

Question

是否可以在不使用react.createElement的情况下手动创建react元素对象。

这个想法是在从 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); 即可创建一个包含所有子项、属性等的组件。