如何在该React高阶组件场景下声明PropsType？是否有解决方案？

当然可以给这种高阶组件（HOC）声明PropTypes，而且实现起来逻辑很清晰，咱们一步步来看怎么弄：

首先先修正你代码里的两个小问题：

• PropsTypes拼写错误，正确的包名是prop-types，导入时应该写PropTypes
• render方法里的<App>标签没有闭合，而且最好把HOC不需要的props传递给原组件

接下来是具体的实现方案，核心思路是合并HOC自身需要的PropTypes和被包装组件的PropTypes，这样既校验HOC专属的props，也不丢失原组件的类型检查：

import React from 'react';
import PropTypes from 'prop-types'; // 修正拼写错误

export default App => {
  class AppRedux extends React.Component {
    constructor(props) {
      super(props);
      // 这里可以处理你的逻辑，比如使用props.aaaa
    }

    render() {
      // 解构出HOC自身需要的props，把剩余的传递给原组件
      const { aaaa, ...restProps } = this.props;
      return <App {...restProps} />; // 闭合标签并传递剩余props
    }
  }

  // 声明包装组件的PropTypes：合并HOC专属props和原组件的PropTypes
  AppRedux.propTypes = {
    // HOC自己需要处理的props，示例里是aaaa
    aaaa: PropTypes.string.isRequired,
    // 展开原组件的PropTypes，保留原组件的类型校验
    ...App.propTypes,
  };

  // 可选：合并原组件的默认props
  AppRedux.defaultProps = {
    ...App.defaultProps,
  };

  return AppRedux;
};

关键说明： #

• 类型校验覆盖完整：通过...App.propTypes把原组件的类型规则合并进来，这样传递给包装后组件的所有props都会被校验，既包括HOC需要的aaaa，也包括原App组件要求的props
• 避免冗余props传递：在render里解构出HOC用到的props，只把剩余的传递给原组件，避免无效props污染原组件的props列表
• 默认props同步：如果原组件有defaultProps，可以同样合并到包装组件上，保证默认值生效

如果你的HOC不需要自己的专属props，只是单纯增强原组件，那可以直接把包装组件的PropTypes设置为原组件的PropTypes：

AppRedux.propTypes = App.propTypes;

这样就能在HOC场景下完整保留React的类型校验能力啦。

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