動的レンダリングコンポーネント - React Native

Question

私は、反応ネイティブ構文とかなり混同しています。 numberChildrenLabel> 0の場合、私はラッパー（CardSection）を動的にレンダリングしようとしていました。子の数に応じてx個のコンポーネントをレンダリングします。私が現在やっていることはうまくいかず、構文エラーを修正してもかなり面倒だと思います。入力に基づいて複数のコンポーネントをレンダリングする最良の方法は何ですか？カッコ内

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

、あなたは表現を必要としています。 forループの内容は、ステートメントです。また、returnは関数内から何かを出力します。この方法では使用できません。

以下のコードはテストしていませんが、動作するはずです。

render(){ 
     return(
       ... 
       { 
       this.state.numberChildrenLabel > 0 ? 
       <CardSection> 
       <Text style={{ flex: 2}}>Children age:</Text> 
       <View style={{ flex: 3}}> 
        { 
        Array(this.state.numberChildrenLabel).fill().map((_, i) => i).map(i => <Text>child{i}</Text>) 
        } 
       </View> 
       </CardSection> 
       : 
       <View/> 
       } 
       ... 
     ); 
    }