Comment analyser les enfants JSX

Question

J'ai cherché sur internet. La création élément est appelé avec les enfants sous forme de chaîne au lieu de remerciement objet à l'aide

Ceci est du code

export function createElement(tag: string, props?: any, ...children: JSX.Element[]){ 
    let el = "<"+tag+">"; 

    if(props != undefined){ 
     for(let i of children){ 
      if(i == undefined) 
       throw new Error("Excepted class got undefined"); 
      else{ 

      } 
     } 
    } 
    el+= "</"+tag+">"; 

    return el; 
} 

Comment puis-je faire en sorte que les enfants ne sont pas tableau de chaînes

Answer 1

Parsing string JSX " à la volée "dans les instances correspondantes de JSX.Element est tout un exploit et aurait probablement besoin de jouer avec tsc pour transpiler votre chaîne générée dans les classes correspondantes. Malheureusement, je n'ai pas encore trouvé de solution acceptable à ce problème générique. D'autre part dans la plupart des cas, j'ai vu que vous n'avez pas besoin d'analyser une chaîne JSX arbitraire. Il s'applique lorsque vous travaillez avec un ensemble limité d'éléments possibles et qu'ils sont instanciés de la même manière. Dans votre exemple, vous pouvez vous en sortir avec un simple interrupteur:

let ComponentClass; 

switch(tag) 
{ 
    case "MyComponent": 
     ComponentClass = MyComponent; 
    break; 

    case "MyOtherComponent": 
     ComponentClass = MyOtherComponent; 
    break; 

    // Other cases/default comes here 
} 

return <ComponentClass {...props}>{children}</ComponentClass>;