如何在 React Native 中制作通用组件？

Question

我想制作一个通用组件，但我该怎么做呢？

型号：

export interface ISelectOptionsRLV<T, C> {
  data: T[];
  onPress: (option: C[]) => void;
}

通用组件列表：

import { StyleSheet, Text, View, FlatList } from 'react-native'
import React from 'react'
import { ISelectOptionsRLV } from './Model'

const SelectOptionsRLV = ({ data, onPress }: ISelectOptionsRLV) => {
  return (
    <FlatList
      data={data}
      ...
    />
  )
}

export default SelectOptionsRLV

const styles = StyleSheet.create({})

现在我得到这个错误：

Generic type 'ISelectOptionsRLV<T, C>' requires 2 type argument(s)

我知道这个错误我必须设置我的类型，但它不是通用的，我的意思是我需要 4 个平面列表组件并且每个数据类型都不同。那么我必须制作 4 个文件，或者我该怎么做？我希望我的所有数据都包含在通用组件中，所以我不想创建 4 个组件我想要一个 Flatlist 组件并每次都使用它

Answer 1

试试这个：

通用组件列表：

import { StyleSheet, Text, View, FlatList } from 'react-native'
import React from 'react'
import { ISelectOptionsRLV } from './Model'

const SelectOptionsRLV = <T, C>({ data, onPress }: ISelectOptionsRLV<T, C>) => {
  return (
    <FlatList
      data={data}
      ...
    />
  )
}

export default SelectOptionsRLV;

const styles = StyleSheet.create({})

另一个组件：

const AnotherComponent = () => {
  return (
    <SelectOptionsRLV<yourType, yourType> data={yourData} onPress={yourFunction} />
  )
}

如何在 React Native 中制作通用组件？

how to make generic component in react native?

reactjs

typescript

react-native

expo