React Native Redux：点击Touchable组件时如何向action creator传递标识？

嘿，这个需求很典型，我来给你几个简单实用的方法，轻松让点击事件知道是哪个磁贴被触发了～

1. 直接在 onPress 回调里传递固定ID #

如果你的8个磁贴是手动一个个写的（不是循环渲染），那直接在调用selectCell的时候把对应的ID传进去就行，修改你的代码如下：

// 第一个磁贴，传ID 1
<TouchableWithoutFeedback onPress={()=>this.props.selectCell(1)}>
  <Row style={[styles.orangish,styles.cell]}>
    <Image source={Rain} />
  </Row>
</TouchableWithoutFeedback>

// 第二个磁贴，传ID 2
<TouchableWithoutFeedback onPress={()=>this.props.selectCell(2)}>
  <Row style={[styles.orangish,styles.cell]}>
    <Image source={Sunny} />
  </Row>
</TouchableWithoutFeedback>

// ... 剩下6个磁贴依次传ID 3到8

然后对应的Redux Action Creator要接收这个ID参数，把它放到action的payload里：

// action creator 示例
export const selectCell = (cellId) => {
  return {
    type: 'SELECT_CELL', // 你的action类型
    payload: { id: cellId } // 把ID带进去
  };
};

这样你的Reducer就能通过action.payload.id拿到被点击的磁贴ID，进而处理对应的状态啦。

2. 循环渲染磁贴时动态传递ID #

如果这8个磁贴是从数组数据里循环渲染出来的（推荐这种方式，更易维护），那可以直接从循环的项里取ID传递：

// 先定义磁贴数据数组，每个项带唯一ID和资源
const tileData = [
  { id: 1, image: Rain },
  { id: 2, image: Cloud },
  { id: 3, image: Snow },
  // ... 补充剩下5个磁贴的数据
];

// 组件渲染部分
{tileData.map(tile => (
  <TouchableWithoutFeedback 
    key={tile.id} // 必须加唯一key，React要求
    onPress={() => this.props.selectCell(tile.id)}
  >
    <Row style={[styles.orangish,styles.cell]}>
      <Image source={tile.image} />
    </Row>
  </TouchableWithoutFeedback>
))}

这种方式不用重复写8次几乎一样的代码，后续修改磁贴数量或属性也更方便。

3. 可选优化：避免重复创建箭头函数（性能敏感场景） #

如果你的磁贴数量很多（远不止8个），担心每次渲染都创建新箭头函数的性能影响，可以把点击回调抽成组件的类方法：

// 组件类内部定义方法（用箭头函数自动绑定this）
handleTilePress = (cellId) => {
  this.props.selectCell(cellId);
};

// 渲染时用bind传递ID，或者继续用箭头函数
<TouchableWithoutFeedback 
  onPress={this.handleTilePress.bind(this, tile.id)}
>
  {/* ... 磁贴内容 */}
</TouchableWithoutFeedback>

不过说实话，8个磁贴的场景下，箭头函数的性能影响完全可以忽略，不用刻意做这个优化，怎么写顺手怎么来就行。

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