2016-01-07 34 views
13

Ich möchte eine Liste von Feldern abhängig von der Nummer des Players erstellen, den der Benutzer ausgewählt hat. Ich wollte so etwas machen:Loop in react-native

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

Aber reagieren-native Syntax betrachten oben als ‚unerwartetes Token‘ zeigt auf dem for-Schleife Linie. Gibt es eine andere Möglichkeit, dies zu erreichen?

Antwort

25

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

+0

Oh ich verstehe. Also in reaktionseigen, Dinge wie Zahlung = Zahlung + ... gibt es nicht? Wir müssen sie tatsächlich wie Arrays behandeln? –

+0

Sie können immer noch '+' verwenden, ich habe Array zur Vereinfachung verwendet. Sie können reguläres Javascript verwenden. – vinay

+0

Hmmmm. Können Sie näher erläutern, warum mein früherer Code nicht funktioniert hat? Eine andere Frage ist, dass es jetzt warnt, dass ich für jeden Gegenstand Schlüssel benötige, wo soll ich den Schlüssel ablegen? –

0

Zunächst einmal ich schreibe empfehlen Sie das gewünschte Element arbeiten mehrere Male zu machen (in Ihrem Fall Liste der Felder) als separates Bauteil Dies sollte:

Dann, in Ihrem Fall, beim Rendern basierend auf einer Nummer und nicht eine Liste, würde ich die for-Schleife außerhalb der Rendermethode verschieben für einen besser lesbaren Code:

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

Es gibt jedoch viele weitere Möglichkeiten, geloopte Inhalte in nativen Reagieren zu rendern. Die meisten Möglichkeiten sind in this article abgedeckt, also überprüfen Sie es bitte, wenn Sie an weiteren Details interessiert sind! Die Beispiele im Artikel stammen von React, aber alles gilt auch für React Native!