如何在React Native FlatList中实现DRY原则，复用OnPress传递的相同Props

你当前代码的重复逻辑来自于同一份字段需要同时用于子组件渲染、路由跳转传参两个场景，只需要把公共字段聚合定义，即可消除重复代码，以下是3种可行的实现方案：

方案1：父层预聚合参数（零侵入改法，无需修改子组件） #

提前把需要复用的字段提取为单独的对象，分别通过扩展运算符传给子组件、路由跳转方法即可：

const Parent = ({ navigation }) => {
  return (
    <>
      <StatusBar hidden />
      <FlatList
        data={data}
        renderItem={({ item }) => {
          // 只定义一次公共参数
          const commonParams = {
            title: item.name,
            color: item.color,
            foo: item.foo
          }
          return (
            <Child
              {...commonParams}
              onPress={() => navigation.navigate(routes.PATH, commonParams)}
            />
          )
        }}
        keyExtractor={item => item.id.toString()}
      />
    </>
  )
}

Parent.propTypes = {
  navigation: PropTypes.object.isRequired,
}

该方案改动最小，完全兼容现有子组件的逻辑，适合快速优化。

方案2：子组件自处理跳转逻辑（逻辑内聚，父组件代码更简洁） #

借助React Navigation提供的useNavigation钩子，将路由跳转逻辑内聚到子组件内部，父组件只需传递完整的item对象即可：

父组件简化后代码： #

const Parent = () => {
  return (
    <>
      <StatusBar hidden />
      <FlatList
        data={data}
        renderItem={({ item }) => <Child item={item} />}
        keyExtractor={item => item.id.toString()}
      />
    </>
  )
}

子组件修改后代码： #

import { useNavigation } from '@react-navigation/native'

const Child = ({ item }) => {
  const navigation = useNavigation()
  const { name: title, color, foo } = item

  const handlePress = () => {
    navigation.navigate(routes.PATH, { title, color, foo })
  }

  return (
    <TouchableOpacity onPress={handlePress} activeOpacity={0.8}>
      <View style={[styles.row, { backgroundColor: color || colors.primary }]}>
        <Text style={styles.text}>{title}</Text>
      </View>
    </TouchableOpacity>
  )
}

Child.propTypes = {
  item: PropTypes.shape({
    name: PropTypes.string.isRequired,
    color: PropTypes.string.isRequired,
    foo: PropTypes.any.isRequired
  }).isRequired
}

该方案适合子组件跳转逻辑固定的场景，后续修改跳转参数只需要调整子组件代码即可，维护成本更低。

方案3：直接传递完整item（极简改法，适合小数据量场景） #

如果跳转的目标页面支持直接接收完整item作为参数，可以进一步简化代码：

// 父组件renderItem逻辑
renderItem={({ item }) => (
  <Child
    title={item.name}
    color={item.color}
    onPress={() => navigation.navigate(routes.PATH, { item })}
  />
)}

注意：如果item包含大量冗余字段，会导致路由参数体积过大，不推荐大数据量场景使用该方案。

内容的提问来源于stack exchange，提问作者GʀᴜᴍᴘʏCᴀᴛ