Pętla w trybie natywnego reagowania

Question

Chcę utworzyć listę pól w zależności od numeru gracza, który został wybrany. Chciałem zrobić coś takiego:

generatePaymentField() { 
    var noGuest = this.state.guest; 
    var payment = 
    <View> 
     <View> 
      <View><Text>No</Text></View> 
      <View><Text>Name</Text></View> 
      <View><Text>Preference</Text></View> 
     </View>; 

    for (var i=0; i < noGuest; i++) { 
     payment = payment + 
      <View> 
       <View> 
        <TextInput /> 
       </View> 
       <View> 
        <TextInput /> 
       </View> 
       <View> 
        <TextInput /> 
       </View> 
      </View>; 
    } 
    return payment; 
} 

render() { 
    var payment = this.generatePaymentField(); 
    this.setState({payment : payment}); 
    return (
     <View> 
      {this.state.payment} 
     </View>; 
    ) 
} 

Ale reagować-natywnej składni powyżej traktowane jako „nieoczekiwany znak” wskazując na linii do pętli. Czy jest jakiś inny sposób, w jaki mogę to osiągnąć?

Answer 1

To powinno działać

render(){ 
 

 
\t var payments = []; 
 

 
\t for(let i = 0; i < noGuest; i++){ 
 

 
\t \t payments.push(
 
\t \t \t <View key = {i}> 
 
\t \t \t \t <View> 
 
\t \t \t \t \t <TextInput /> 
 
\t \t \t \t </View> 
 
\t \t \t \t <View> 
 
\t \t \t \t \t <TextInput /> 
 
\t \t \t \t </View> 
 
\t \t \t \t <View> 
 
\t \t \t \t \t <TextInput /> 
 
\t \t \t \t </View> 
 
\t \t \t </View> 
 
\t \t) 
 
\t } 
 
\t 
 
\t return (
 
\t \t <View> 
 
\t \t \t <View> 
 
\t \t \t \t <View><Text>No</Text></View> 
 
\t \t \t \t <View><Text>Name</Text></View> 
 
\t \t \t \t <View><Text>Preference</Text></View> 
 
\t \t \t </View> 
 

 
\t \t \t { payments } 
 
\t \t </View> 
 
\t) 
 
}

Answer 2

Przede wszystkim polecam pisanie element, który chcesz uczynić wiele razy (na liście przypadku pól) jako odrębny składnik:

function Field() { 
    return (
     <View> 
      <View> 
       <TextInput /> 
      </View> 
      <View> 
       <TextInput /> 
      </View> 
      <View> 
       <TextInput /> 
      </View> 
     </View> 
    ); 
} 

Następnie, w twoim przypadku, podczas renderowania opartego na pewnym numerze, a nie na liście, przenosiłbym pętlę for poza metodą renderowania dla bardziej czytelnego kodu:

renderFields() { 
    const noGuest = this.state.guest; 
    const fields = []; 
    for (let i=0; i < noGuest; i++) { 
     // Try avoiding the use of index as a key, it has to be unique! 
     fields.push(
      <Field key={"guest_"+i} /> 
     ); 
    } 
    return fields; 
} 

render() { 
    return (
     <View> 
      <View> 
       <View><Text>No</Text></View> 
       <View><Text>Name</Text></View> 
       <View><Text>Preference</Text></View> 
      </View> 
      {this.renderFields()} 
     </View>; 
    ) 
} 

Istnieje jednak wiele innych sposobów renderowania zawartości z zapętleniem w reakcji natywnej. Większość sposobów jest omówiona w this article, więc sprawdź, czy jesteś zainteresowany szczegółami! Przykłady w artykule pochodzą z React, ale wszystko odnosi się również do React Native!