时间戳

首页 > 解决方案 > 重用传递给 OnPress 的相同道具时，如何在 FlatList 中实现 DRY？

reactjs - 重用传递给 OnPress 的相同道具时，如何在 FlatList 中实现 DRY？

问题描述

学习 React Native 我开始使用FlatList和 React Navigation，虽然一切正常，但我一直在寻找一种方法来防止调用相同的道具。在我的父组件中：

const Parent = ({ navigation }) => {
  return (
    <>
      <StatusBar hidden />
      <FlatList
        data={data}
        renderItem={({ item }) => (
          <Child
            title={item.name}
            color={item.color}
            onPress={() =>
              navigation.navigate(routes.PATH, {
                title: item.name,
                foo: item.foo,
                color: item.color,
              })
            }
          />
        )}
        keyExtractor={item => item.id.toString()}
      />
    </>
  )
}

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

我将所有内容传递给我的子组件：

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

Child.propTypes = {
  onPress: PropTypes.func.isRequired,
  title: PropTypes.string.isRequired,
  color: PropTypes.string.isRequired,
}

有没有一种方法可以重用title和color在道具中并传递给函数？

标签： reactjsreact-nativereact-props

解决方案

我并没有真正使用 react-native。你可以传入ChildrenderItem。唯一的问题是您需要访问导航 onPress。也许你可以使用上下文。

理论上这应该有效


const Context = createContext();

const Child = ({ item }) => {
  const {title, color} = item;
  const navigation = useContext(Context);
  const onPress = useCallback(() => navigation.navigate(routes.PATH, {
    title: item.name,
    foo: item.foo,
    color: item.color,
  }));

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


const Parent = ({ navigation }) => { 
  const createChild = (item) => 
  return (
    <>
      <Context.Provider value={navigator}>
        <StatusBar hidden />
        <FlatList
          data={data}
          renderItem={Child}
          keyExtractor={item => item.id.toString()}
        />
      </Context.Provider>
    </>
  )
}

推荐阅读