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

Question

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

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

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

所有解决方案均无效。

调用的函数是 Redux 的 Actions 创建者，并被分派。这是 Redux 还是 React-Native 的问题（可能是 ReactJS）

这是一个sn-p，市场为//错误的代码行不起作用，然后是好的代码行

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

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

Answer 1

如果您的高级回调接受一个参数，您需要确保您的匿名函数也接受一个参数（注意：使用箭头语法创建匿名函数会自动将我们的函数绑定到当前的 this 的值语境）。我认为您目睹了您的回调绑定到不正确的上下文（窗口）或您不接受传递的参数的问题的组合：

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

Answer 2

这可能是您的 this 未正确设置在您的闭包中的问题。

尝试这样绑定：

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