Manuelles Erstellen eines reaktiven Elements Objekt mit Streaming

Question

Ist es möglich, ein reaktives Element manuell zu erstellen, ohne react.createElement zu verwenden?

Die Idee besteht darin, verschachtelte reagieren Elemente Struktur während des Streams von HTML zu erstellen. Das Problem ist, dass mir verschachtelte Kinder beim Streaming nicht bewusst sind.

Mein Ziel ist es, in der Lage sein, ein reagierendes Element von einem verschachtelten Objekt zu erstellen. dh:

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

Answer 1

Sie können auch verschachtelte Komponenten erstellen, indem React.createElement verwenden, aber Sie müssen eine spezielle Syntax folgen, das zu erreichen.

tag Bedürfnisse type und attribs sein müssen props sein, aber Sie können über das Objekt iterieren und diese Schlüssel umbenennen, wenn nötig, damit nicht das Problem.

Jetzt mit etwas wie folgt aus:

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

Sie nur React.createElement(data.type, data.props, data.children); verwenden können eine Komponente einschließlich aller Kinder, Eigenschaften et cetera zu erstellen.