React-Native ListView renderRow 问题传递props。正确的方式还是错误的方式

IT技术 android ios reactjs react-native redux
2021-05-04 17:28:18

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

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

  2. 将函数作为定义了参数的 props 传递,并在 child 中调用没有参数的函数

没有一个解决方案有效。

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

这是一个片段,市场为 //ERROR 不起作用的代码行,然后是好的代码行

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 提前致谢

2个回答

如果您的高级回调接受一个参数,您需要确保您的匿名函数也接受一个参数(注意:使用箭头语法创建匿名函数会自动将我们的函数绑定到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>
    );
  }
}

这可能是您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>
    );
  }
}