Typescript：在React Native中为自定义组件中的组件属性分配属性类型

kokeuurv 于 2023-02-20 发布在 TypeScript

关注(0)|答案(1)|浏览(196)

我正在创建一个自定义的可重用组件，它可以将另一个组件作为 prop 用作子组件。我想动态地从传递到该组件的数据中添加类型。
最好的参考是<FlatList>。我需要确切地了解<FlatList>是如何创建的。我们为它提供了一个renderItem属性，它将接受该组件并将data的类型传递给renderItem函数。
示例：

<FlatList
    data={['str1', 'str2', 'str3']} // Array type is string[] here
    renderItem={({item}) => <Text>{item}</Text>} // The item type is string here />

所需组件：

<MyComponent
    data={[ { name: 'abc', age: 5 }, { name: 'xyz', age: 5 } ]} // Array is a custom type User[]
    renderItem={({item}) => <Text>{item.name}</Text>} /> // The item is User type

typescript

来源：https://stackoverflow.com/questions/75495352/typescript-assign-prop-type-to-component-prop-in-a-custom-component-in-react-na

1条答案

按热度按时间

llew8vvj1#

FlatList正在使用泛型参数来实现所需的结果。您可以创建使用相同机制的自定义组件。下面是一个示例：

type MyComponentProps<T> = {
    data: T[]
    renderItem: (item: T) => React.ReactNode
}

const MyComponent = <T,>({data, renderItem}: MyComponentProps<T>) => {
    // you code 
}

希望能有所帮助

赞(0）回复(0）举报 2023-02-20

我来回答

Typescript：在React Native中为自定义组件中的组件属性分配属性类型

1条答案

相关问题

热门标签

最新问答