android - React-Native ListView renderRow 问题传递 Prop 。正确的方式或错误的方式

Question

在 React-Native 中使用 ListView，我看到它不一样，将 Prop 移动到列表项，

1. 仅通过引用将函数作为 props 传递，并在子组件中调用参数，或者

2. 将定义参数的函数作为 props 传递，并在子级中调用不带参数的函数

所有解决方案均无效。

被调用的函数是 Redux 的 Actions 创建者，并被调度。这是 Redux 还是 React-Native(也许是 ReactJS)的问题

这是一个 fragment ，营销为//错误的代码行不工作，然后是好的代码行

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

这里有一个关于这个问题的 repo https://github.com/srlopez/test 提前致谢

Answer 1

如果您的高级回调接受一个参数，您需要确保您的匿名函数也接受一个参数(注意:使用箭头语法创建匿名函数会自动将我们的函数绑定(bind)到当前函数中的 this 的值语境)。我认为您遇到了一系列问题，其中您的回调绑定(bind)到不正确的上下文(窗口)或者您不接受传递的参数:

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