React Native中通过Props传递点击列表项ID的实现方法

其实这个问题很容易搞定，只需要调整两处代码，就能让点击事件触发时把对应的item ID顺利传递到主屏幕：

第一步：修改SearchResultList组件，传递item ID到回调函数 #

你当前的SearchResultList里，给SearchResultListItem绑定onItemPressed时只是把props的函数直接传过去了，但并没有带上item.id。我们需要在调用这个回调时主动把ID作为参数传进去：

const SearchResultList = props => ( 
  <View style={styles.container}> 
    <ScrollView keyboardShouldPersistTaps="always"> 
      {props.itemList.map(item => ( 
        <SearchResultListItem 
          key={item.id} 
          imageSource={item.workoutImage} 
          mainText={item.workoutName} 
          subText={item.length + " | " + item.difficulty} 
          // 核心修改：调用onItemPressed时传入当前item的id
          onItemPressed={() => props.onItemPressed(item.id)} 
        /> 
      ))} 
    </ScrollView> 
  </View> 
);

第二步：修正主屏幕的回调函数参数 #

你主屏幕里的回调写的是id => alert(item.id)，这里有个明显的错误：回调的参数是id，但你却试图访问item.id——而item在这个回调的作用域里根本不存在。应该直接使用回调接收的id参数：

<SearchResultList 
  itemList={this.props.searchedWorkouts} 
  // 修正：直接使用回调参数id
  onItemPressed={id => alert(id)} 
  // 如果是要跳转到详情页，改成这样即可：onItemPressed={id => this.onLoadWorkoutDetailView(id)}
/>

这样修改后，当你点击SearchResultListItem时，对应的item ID就会被传递到主屏幕的回调函数里，不管是用来弹窗展示还是作为参数跳转详情页都能正常工作了。

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