React Native Pass-Parameter durch Kartenfunktion

Question

Ich lerne gerade React Native und ich möchte eine Reihe von Schaltflächen mit dynamischen Daten erstellen. Mein aktueller Code ist:

var locations = this.state.campus.map(function(item, key){ 
      return(
       <TouchableHighlight key={key} 
       style={[styles.button, (this.state.location==={item} && styles.buttonPressed)]} 
       underlayColor='#dddddd' 
       onPress={()=>this.buttonPress({item})} > 
       <Text style={ 
        styles.plainText}>{item}</Text> 
      </TouchableHighlight> 
      ) 

Mein Problem mit den Linien ist

style={[styles.button, (this.state.location==={item} && styles.buttonPressed)]} 

und

onPress={()=>this.buttonPress({item})} 

ich versuche diese Zeilen unter Verwendung der Daten dynamisch von der Landkarte Funktion erzeugen. Diese Codezeilen funktionieren perfekt, wenn ich statische Daten verwende (dh jede Schaltfläche separat generieren), aber keine dynamischen Daten verwenden. Der Code erzeugt eine Anzeige, so dass das Problem nicht beim Rendern auftritt, sondern bei der Funktionalität.

Mit dem Drücken der Taste bekomme ich die Fehlermeldung undefined in kein Objekt, während der Stil einfach die ganze Anzeige nicht zu rendern verursacht.

Es ist offensichtlich, dass die dynamischen Daten ({item}) innerhalb des Text-Elements funktionieren, aber nicht, wenn sie an die anderen beiden Elemente als Daten übergeben werden. Ich habe versucht, {{item}} zu verwenden, aber das wirft einen Syntaxfehler.

Gibt es eine Möglichkeit, dynamische Daten wie diese in React Native zu behandeln?

Answer 1

In beiden Fällen wickeln Sie unnötigerweise item in {}. Für diese beiden Zeilen sind die Ausdrücke innerhalb des äußeren {} pures Javascript (ein Array und eine Funktion) und sollten der JavaScript-Syntax folgen.

also die Linien sollte wie folgt lauten:

style={[styles.button, (this.state.location===item && styles.buttonPressed)]} 

und

onPress={()=>this.buttonPress(item)} 

Answer 2

Sie sollten diese Speicherung in einer anderen Variablen: lassen _Diese = this;

Dann nutzen _this anstelle dieses

Answer 3

das Problem passiert ist, weil Sie Funktion (Pos, Schlüssel) werden mit {und Sie haben

let locations = this.state.campus.map((item, key) => { return <TouchableHighlight key={key}.. 

Pfeil Funktion nutzen zu können, muss es tun für halten 'this' Kontext

Answer 4

Verwendung

Diese Methode ist Arbeit: 1) erstellen Funktion für Elemente mit dynamischen Daten zu schaffen

createElement = (item) => { 
    return(
     <TouchableHighlight onPress={()=>this.buttonPress({item})}> 
      <Text style={ styles.plainText }> {item} </Text> 
     </TouchableHighlight> 
    ) 
}; 

2) In dieser Funktion in Funktion machen, wie in Folge Beispiel:

render (
    elementsList = []; 
    for (var i = 0; i < 10; i++){ 
     elementsList.push(this.createElement(i)); 
    }; 

    return (
     <View> 
      {elementsList} 
     </View> 
    ) 
); 

Es funktioniert, wenn Sie verstehen, wie diese verwendet werden.