React-Native ListView renderRow problemi passando oggetti di scena. Il modo giusto o nel modo sbagliato

Question

Lavorare con un controllo ListView in React-nativa, ho visto che non è la stessa, spostando oggetti di scena per la voce di elenco,

1. funzioni passare come oggetti di scena solo con il riferimento, e richiamare i parametri nel componente bambino, o

2. funzioni Passo come oggetti di scena con parametri definiti, e richiamare la funzione senza parametri nel bambino

nessuna delle soluzioni funziona.

La funzione invocata sono creatori di azioni di Redux e inviati. E 'questo un problema di Redux o React-Native (forse ReactJS)

Si tratta di un frammento di codice, mercato come // ERRORE le righe di codice che does'nt lavoro seguita da quelli buoni

class App extends Component { 

    // On props 
    // data: an Array 
    // doThis: an action creator of Redux 
    // doThat: idem 

    constructor(){ 
    super(); 
    this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    } 

    render() { 
    const dataSource = this.ds.cloneWithRows(this.props.data); 

    return (
     <View> 
     <ListView style={{flex:1}} 
      dataSource={dataSource} 
      renderRow={(rowData, sectionID, rowID) => 
       <Item rowData={rowData} 
       //ERROR 
       //onPress={this.props.doThis} 
       //onLongPress={this..props.doThat} 
       //RIGHT NO ERROR TOO 
       onPress={() => this.props.doThis(rowData)} 
       onLongPress={() => this.props.doThat(rowData)} 
       /> 
      } 
      /> 
     </View> 
    ) 
    } 
} 

class Item extends Component { 
    render() { 
    return (
     <View> 
     <TouchableHighlight 
      //ERROR 
      //onPress={() => { this.props.onPress(this.props.rowData) }} 
      //onLongPress={() => { this.props.onLongPress(this.props.rowData) }} 
      //WRONG TOO 
      onPress={this.props.onPress} 
      onLongPress={this.props.onLongPress} 
      > 
      <Text> 
      {rowData} 
      </Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
} 

c'è un repo con questo problema qui https://github.com/srlopez/test Grazie in anticipo

Answer 1

Probabilmente è un problema con il tuo this che non viene impostato direttamente nella tua chiusura.

Prova vincolante in questo modo:

class Item extends Component { 
    render() { 
    return (
     <View> 
     <TouchableHighlight 
      onPress={this.props.onPress.bind(this, this.props.rowData)} 
      onLongPress={this.props.onLongPress.bind(this, this.props.rowData)} 
      > 
      <Text> 
      {rowData} 
      </Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
} 

Answer 2

Se i callback di alto livello accettano un parametro, è necessario assicurarsi che le funzioni anonime accettano un parametro così (Nota: la creazione di funzioni anonime utilizzando la sintassi freccia lega automaticamente la nostra funzione al valore di this nel contesto corrente). Credo che avete assistito una combinazione di problemi in cui o il tuo callback erano legati al contesto non corretta (la finestra) o non accettavano gli argomenti passati:

class App extends Component { 

    // On props 
    // data: an Array 
    // doThis: an action creator of Redux 
    // doThat: idem 

    constructor(){ 
    super(); 
    this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    } 

    render() { 
    const dataSource = this.ds.cloneWithRows(this.props.data); 

    return (
     <View> 
     <ListView style={{flex:1}} 
      dataSource={dataSource} 
      renderRow={(rowData, sectionID, rowID) => 
       <Item rowData={rowData} 
        onPress={(data) => this.props.doThis(data)} 
        onLongPress={(data) => this.props.doThat(data)} /> 
      }/> 
     </View> 
    ) 
    } 
} 

class Item extends Component { 
    render() { 
    return (
     <View> 
     <TouchableHighlight 
      onPress={() => this.props.onPress(this.rowData)} 
      onLongPress={() => this.props.onLongPress(this.rowData)}> 
      <Text> 
      {rowData} 
      </Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
}