Creare manualmente un elemento reattivo Oggetto con streaming

Question

È possibile creare un oggetto elemento di risposta manualmente senza utilizzare react.createElement.

L'idea è di creare un albero di elementi reattivi nidificati durante lo streaming da html. Il problema è che non sono a conoscenza di bambini nidificati durante lo streaming.

Il mio obiettivo è essere in grado di creare un elemento di reazione da un oggetto nidificato. vale a dire:

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

Answer 1

È inoltre possibile creare componenti nidificati utilizzando React.createElement, ma è necessario seguire una sintassi speciale per raggiungere questo obiettivo.

tag deve essere type e attribs devono essere props, ma si può iterare l'oggetto e rinominare quelle chiavi, se necessario, in modo che non è questo il problema.

Ora avere qualcosa di simile:

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

Si può semplicemente utilizzare React.createElement(data.type, data.props, data.children); creare un componente compresi tutti i bambini, le proprietà eccetera.