Dynamische Rendering-Komponenten - Reagieren Native

Question

Ich bin ziemlich verwirrt mit der reaktiven nativen Syntax. Ich habe versucht, einen Wrapper (CardSection) dynamisch zu rendern, wenn numberChildrenLabel> 0 ist. Dann abhängig von der Anzahl der untergeordneten Elemente möchte ich x Anzahl der Komponenten rendern. Was ich momentan mache, funktioniert nicht und ich denke, es ist ziemlich unordentlich (selbst wenn ich die Syntaxfehler behebe). Was ist der beste Weg, mehrere Komponenten basierend auf einer Eingabe zu rendern?

render(){ 
    return(
      ... 
      { 
      this.state.numberChildrenLabel > 0 ? 
      <CardSection> 
      <Text style={{ flex: 2}}>Children age:</Text> 
      <View style={{ flex: 3}}> 
       { 
       for(var i=0; i<this.state.numberChildrenLabel; i++){ 
        return(
        <Text>child{i}</Text> 
       ); 
       } 
       } 
      </View> 
      </CardSection> 
      : 
      <View/> 
      } 
      ... 
    ); 
} 

Answer 1

in Klammern, benötigen Sie einen Ausdruck. Was ist drin für Schleife ist eine Anweisung. Außerdem gibt return etwas aus einer Funktion aus; Du kannst es nicht auf diese Weise benutzen.

Ich habe den folgenden Code nicht getestet, aber es sollte funktionieren.