React Native+TypeScript：限制component prop仅接受支持onPress的组件

一、TypeScript编译时类型约束 #

要让MyComponent的component属性仅接受支持onPress的组件（如Button、Touchable系列、Pressable），需要将原本宽泛的React.ElementType替换为更具体的类型，确保组件的props包含onPress属性：

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

// 定义仅接受带onPress属性的组件类型
type PressableComponent = React.ComponentType<{
  onPress: (...args: any[]) => void;
}>;

interface MyComponentProps {
  component: PressableComponent;
  children?: React.ReactNode;
}

const MyComponent: React.FC<MyComponentProps> = (props) => {
  const { component: Component, children } = props;

  const myOnPress = () => {
    console.log('自定义onPress触发');
  };

  return (
    <View>
      <Component onPress={myOnPress} />
      <View>{children}</View>
    </View>
  );
};

这样一来，当传入不支持onPress的组件（比如普通View）时，TypeScript会在编译阶段直接报错，从源头阻止错误传入。

二、运行时校验（开发环境辅助） #

由于TypeScript类型在运行时会被擦除，若需要在开发阶段进一步确保组件合法性，可以添加运行时检查：

const MyComponent: React.FC<MyComponentProps> = (props) => {
  const { component: Component, children } = props;

  // 仅在开发环境执行校验
  if (__DEV__) {
    // 校验类组件
    if (Component.prototype instanceof React.Component) {
      if (!Component.propTypes?.onPress) {
        throw new Error(`传入的组件 ${Component.displayName || '未知组件'} 未支持onPress属性`);
      }
    } else {
      // 校验函数组件（依赖propTypes，局限性较大）
      if (!Component.propTypes?.onPress) {
        throw new Error(`传入的函数组件 ${Component.name || '未知函数组件'} 未支持onPress属性，请确认`);
      }
    }
  }

  const myOnPress = () => {
    console.log('自定义onPress触发');
  };

  return (
    <View>
      <Component onPress={myOnPress} />
      <View>{children}</View>
    </View>
  );
};

注意：Web环境可将__DEV__替换为process.env.NODE_ENV === 'development'；运行时校验依赖组件定义的propTypes，部分无propTypes的组件（如Pressable）可能误判，因此更推荐以编译时类型约束为主，运行时校验作为辅助。

内容的提问来源于stack exchange，提问作者Guillermo Puente Sandoval