React Native：从外部文件更新ListView数据源的技术问题

嘿，这个场景我熟得很！要让MyItem里的按钮触发A类组件更新ListView的数据源，核心就是通过回调函数实现子组件向父组件传递事件，一步步来：

第一步：在A类组件中定义更新数据源的方法 #

首先在你的A类里写一个专门用来更新数据源的方法，还要记得绑定this，确保方法里能正确访问组件的state。比如：

class A extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2,
      }).cloneWithRows([/* 你的初始数据数组 */]),
    };
    // 绑定this，避免作用域问题
    this.handleItemButtonClick = this.handleItemButtonClick.bind(this);
  }

  // 这里写具体的更新逻辑，参数可以接收点击项的数据，方便定位修改
  handleItemButtonClick(clickedItem) {
    // 举个例子：修改点击项的firstElement内容
    const updatedData = this.state.dataSource._dataBlob.s1.map(item => {
      if (item.id === clickedItem.id) { // 假设每个item有唯一id用来匹配
        return {...item, firstElement: '已更新内容'};
      }
      return item;
    });

    // 更新state，触发ListView重新渲染
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(updatedData),
    });
  }

  // ...其他代码
}

第二步：把更新方法作为props传递给MyItem #

在A类的renderRow里，把刚才定义的handleItemButtonClick方法传给MyItem组件：

render() {
  return (
    <ListView
      style={Styles.itemList}
      dataSource={this.state.dataSource}
      renderRow={(data) => <MyItem {...data} onButtonPress={this.handleItemButtonClick} />}
    />
  );
}

第三步：在MyItem中绑定按钮的点击事件 #

最后在MyItem组件里，给TouchableHighlight的onPress绑定传入的onButtonPress方法，还可以把当前item的信息传回去，方便父组件精准更新：

const MyItem = (props) => {
  return (
    <View style={Styles.container}>
      <Text>{props.firstElement}</Text>
      {/* 你的TouchableHighlight按钮 */}
      <TouchableHighlight
        onPress={() => props.onButtonPress(props)} // 把当前item的props传给父组件
        underlayColor="#eeeeee"
      >
        <Text>点击更新数据源</Text>
      </TouchableHighlight>
    </View>
  );
};

额外小提示 #

如果你的项目是较新的React Native版本，其实官方已经不推荐用ListView了，建议换成FlatList，不过回调传递的逻辑是完全一样的，只是数据源的处理略有不同，核心都是通过props传递回调函数实现父子组件通信。

内容的提问来源于stack exchange，提问作者hallz12