동적 렌더링 구성 요소 - 네이티브 네이티브

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

내부 브래킷, 당신은 표현이 필요합니다. 내부 루프는 문입니다. 또한 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/> 
       } 
       ... 
     ); 
    }