如何在本地覆写依赖包默认导出的React组件Prop Types？

方法1：直接修改组件的propTypes属性 #

如果仅在当前模块使用修改后的组件，可直接导入后覆写或补充其propTypes：

import TargetComponent from 'your-dependency';
import PropTypes from 'prop-types';

// 完全覆写原有propTypes
TargetComponent.propTypes = {
  newRequiredProp: PropTypes.string.isRequired,
  modifiedProp: PropTypes.number
};

// 保留原有propTypes并补充/修改
TargetComponent.propTypes = {
  ...TargetComponent.propTypes,
  addedProp: PropTypes.bool,
  existingProp: PropTypes.array // 替换原有属性的类型定义
};

注意：若依赖包的propTypes被Object.freeze()冻结，直接赋值会报错，需先浅拷贝再修改：

const updatedPropTypes = { ...TargetComponent.propTypes };
updatedPropTypes.existingProp = PropTypes.func;
updatedPropTypes.newProp = PropTypes.node;
TargetComponent.propTypes = updatedPropTypes;

方法2：用高阶组件（HOC）包装（推荐） #

不想直接修改原组件（避免影响其他模块使用）时，用HOC包装出一个新组件，自定义其propTypes：

import TargetComponent from 'your-dependency';
import PropTypes from 'prop-types';

const CustomizedComponent = (props) => {
  return <TargetComponent {...props} />;
};

// 自定义propTypes，可覆写或补充原组件的类型
CustomizedComponent.propTypes = {
  ...TargetComponent.propTypes,
  customProp: PropTypes.func.isRequired,
  originalProp: PropTypes.string // 覆写原有属性类型
};

export default CustomizedComponent;

方法3：针对TypeScript项目（扩展类型） #

如果项目用TypeScript，除了propTypes，还可以扩展组件的类型定义：

import TargetComponent, { TargetComponentProps } from 'your-dependency';

// 扩展原有类型
interface CustomizedProps extends TargetComponentProps {
  customProp: () => void;
  originalProp: string; // 覆写原有属性类型
}

const CustomizedComponent = (props: CustomizedProps) => {
  return <TargetComponent {...props} />;
};

// 同时定义propTypes（兼容运行时类型检查）
CustomizedComponent.propTypes = {
  ...TargetComponent.propTypes,
  customProp: PropTypes.func.isRequired,
  originalProp: PropTypes.string
};

export default CustomizedComponent;

内容的提问来源于stack exchange，提问作者Drazen Bjelovuk