React Native自定义组件中为组件Props动态分配类型

DevOps 小满

2026-7-31

实现支持动态类型传递的React Native可复用组件（仿FlatList逻辑）

要实现和FlatList一致的类型自动推导逻辑，核心是利用TypeScript泛型关联data数组的元素类型与renderItem函数的参数类型。以下是具体实现步骤：

1. 定义泛型Props类型

先为组件定义带泛型的Props接口，让data的类型能自动传递给renderItem：

import React, { ReactNode } from 'react';
import { View } from 'react-native';

// 泛型T代表data数组的元素类型
type MyComponentProps<T> = {
  data: T[];
  // renderItem的参数item类型与T绑定
  renderItem: ({ item }: { item: T }) => ReactNode;
};

2. 实现组件核心逻辑

基于上述Props类型编写组件，内部遍历data并调用renderItem渲染子项：

const MyComponent = <T,>(props: MyComponentProps<T>) => {
  const { data, renderItem } = props;

  return (
    <View>
      {data.map((item, index) => (
        <React.Fragment key={index}>
          {renderItem({ item })}
        </React.Fragment>
      ))}
    </View>
  );
};

export default MyComponent;

3. 使用示例

现在可以像FlatList一样使用组件，TypeScript会自动根据data的类型推导renderItem中item的类型：

// 自定义数据类型
type User = {
  name: string;
  age: number;
};

// 调用组件，item自动识别为User类型
<MyComponent
  data={[ { name: 'abc', age: 5 }, { name: 'xyz', age: 5 } ]}
  renderItem={({ item }) => <Text>{item.name}</Text>}
/>