Manually create a streaming reaction element

Question

Is it possible to create a reactive element object manually without using response.createElement.

The idea is to create a tree of nested response elements when streaming from html. The problem is that I don’t know the nested children during the streaming.

My goal is to create a reaction element from a nested object. i.e:

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

Answer 1

You can also create nested components using React.createElement , but for this you need to execute special syntax.

tag should be type and attribs should be props , but you can props over your object and rename these keys, if necessary, so that there is no problem.

Now something like this:

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

You can simply use React.createElement(data.type, data.props, data.children); to create a component, including all children, properties, and so on.