React Native中如何限制自定义函数组件的Props为指定类型的组件

这个问题我之前也踩过坑！你遇到的核心问题是：ReactElement<TextProps> 其实只限制了元素的props类型，而没有限制元素本身的组件类型——也就是说，只要某个组件的props符合TextProps（哪怕它是View），TypeScript都会认为它符合要求，这就导致了错误的组件也能通过类型检查。

咱们来用TypeScript的类型特性解决这个问题，关键是要严格匹配组件的构造函数/函数类型，而不只是它的props。

第一步：定义一个通用类型来锁定组件的React元素 #

先创建一个辅助类型，用来表示“某个特定组件生成的React元素”：

import React, { ReactElement } from 'react';
import { Text, Button, View } from 'react-native';

// 定义一个通用类型，获取指定组件对应的ReactElement类型
type ElementOf<Component extends React.ComponentType<any>> = ReactElement<any, Component>;

这个类型的作用是：传入一个组件（比如typeof Text），返回这个组件渲染出来的React元素类型。

第二步：用这个类型约束你的组件Props #

接下来修改你的SampleArgs和Sample组件：

interface SampleArgs {
  // 严格限制text必须是Text组件生成的元素
  text: ElementOf<typeof Text>;
  // 严格限制button必须是Button组件生成的元素
  button: ElementOf<typeof Button>;
}

const Sample = ({ text, button }: SampleArgs) => {
  return (
    <View>
      <Text>Hello world!</Text>
      {text}
      {button}
    </View>
  );
};

export { Sample };

第三步：验证效果 #

现在再用你的测试案例试试：

// ✅ 完全符合要求，不会报错
<Sample
  text={<Text>I should work!</Text>}
  button={<Button title={'I should work'}/>}
/>

// ❌ 这两个都会触发TypeScript错误！
<Sample
  text={
    <View>
      <Text>Passed View instead of Text, I shouldn't work!</Text>
    </View>
  }
  button={<Text>Passed Text instead of Button, I shouldn't work!</Text>}
/>

TypeScript会明确提示：

• 对于View作为text参数：Type 'ReactElement<ViewProps, typeof View>' is not assignable to type 'ReactElement<any, typeof Text>'
• 对于Text作为button参数：Type 'ReactElement<TextProps, typeof Text>' is not assignable to type 'ReactElement<any, typeof Button>'

为什么之前的写法不行？ #

再回头解释下你尝试过的几种方式的问题：

1. ReactElement<TextProps>：只检查元素的props是否符合TextProps，不关心元素是哪个组件生成的——比如你给View传style（属于TextProps），它也会被认为是合法的。
2. text: Text：Text是组件本身的类型（函数/类），而<Text>是渲染后的React元素（ReactElement），两者类型完全不匹配，所以会报错。
3. ReactElement<Text>：这里的Text是组件类型，但ReactElement的第二个泛型参数才是组件类型，第一个是props类型，所以正确的写法应该是ReactElement<any, typeof Text>，也就是我们上面的ElementOf做的事。

这样就能完美实现你想要的：只允许传入Text和Button组件生成的元素，其他组件一概会被TypeScript拦截。

备注：内容来源于stack exchange，提问作者Martinocom