rawText « JSX_GENERATED_STRING » doit être enveloppé dans un <Text> explicite composante

Question

je générer 100 composants dans un tableau en javascript, comme ceci:

export default class App extends React.Component { 
    render() { 
    var arr = []; 
    for (var i = 0; i < 100; i++) 
    { arr.push("<Button title={\"Button " + i + "\"} color =\"#55aaff\"/>\n"); } 

    return (
     <ScrollView> 
      {arr} 
     </ScrollView> 
    ); 
    } 
} 

J'attends le contenu de arr (qui est de 100 cordes représentant React Buttons) à développer en texte brut, entre mes deux balises <ScrollView>.

Lors de la compilation, je suis face à ce message d'erreur exact:

RawText « <Button title={"Button 0"} color ="#55aaff"/> » must be wrapped in an explicit <Text> component.

La chaîne est apparemment correcte, mais React-autochtone ne me laisse pas l'utiliser comme si elle est tapé manuellement entre le <ScrollView> étiquettes.

Existe-t-il une balise spéciale permettant au réactif-natif de savoir que le contenu de chaînes suivant doit être traité comme Composants?

Merci à l'avance pour toute aide.

Answer 1

Les composants de réaction sont des objets que vous pouvez directement insérer dans des tableaux.

arr.push(<Button title={"Button " + i} color="#55aaff" />);