Loop in nativo reattivo

Voglio fare una lista di campi a seconda del numero del giocatore che l'utente ha selezionato. Volevo fare qualcosa di simile:Loop in nativo reattivo

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>; 
    ) 
}

Ma reagire nativo considerata la sintassi di cui sopra come 'token imprevisto' indicando la per la linea loop. C'è un altro modo in cui posso ottenere questo?

fonte

2016-01-07 Kelvin Aliyanto

Questo dovrebbe funzionare

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) 
 
}

fonte

2016-01-07 06:43:23 vinay

Oh capisco. Quindi nel reagire nativo, cose come pagamento = pagamento + ... non esistono? Dobbiamo effettivamente trattarli come array? –

Puoi ancora usare '+', ho usato Array per semplicità. Puoi usare javascript normale. – vinay

Hmmmm. Quindi puoi approfondire il motivo per cui il mio codice precedente non ha funzionato? Un'altra domanda è che ora mi dà l'avvertimento sulla necessità di chiavi per ogni oggetto, dove dovrei mettere la chiave? –

Prima di tutto, vi consiglio di scrivere la voce che si desidera rendere più volte (nel tuo elenco caso dei campi) come componente separato:

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

Quindi, nel tuo caso, durante il rendering basato su un numero e non su un elenco, sposterei il ciclo for al di fuori del metodo di rendering per un codice più leggibile:

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>; 
    ) 
}

Tuttavia, ci sono molti altri modi per rendere i contenuti in loop nel reagire nativo. La maggior parte dei modi sono coperti in this article, quindi si prega di controllare se siete interessati a maggiori dettagli! Gli esempi in questo articolo sono di React, ma tutto si applica anche a React Native!

fonte

2018-02-14 14:53:09

Loop in nativo reattivo

risposta

Problemi correlati