如何使通用组件在反应原生?

Question

我想做一个通用组件，但是我怎么做呢?

模型:

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

GenericComponentList:

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个flatlist组件和每个数据类型是不同的。然后我要创建4个文件，怎么做呢?我想要所有的数据都在通用组件中，所以我不想创建4个组件，我想要一个Flatlist组件，每次使用它

Answer 1

试试这个:

• GenericComponentList:

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({})

AnotherComponent:

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