如何在 React Native 中制作通用组件?
how to make generic component in react native?
我想制作一个通用组件,但我该怎么做呢?
型号:
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 组件并每次都使用它
试试这个:
- 通用组件列表:
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} />
)
}
我想制作一个通用组件,但我该怎么做呢?
型号:
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 组件并每次都使用它
试试这个:
- 通用组件列表:
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} />
)
}