将类型定义添加到将属性注入组件的HOC中

import React, { ComponentType } from 'react';

// 定义属性类型
interface InjectedProps {
  name: string;
  age: number;
}

// 定义 HOC 函数
function withInjectedProps<T extends InjectedProps>(
  WrappedComponent: ComponentType<T>
) {
  // 使用泛型来保留原始组件的属性类型
  return class extends React.Component<Omit<T, keyof InjectedProps>> {
    render() {
      // 在 HOC 中注入属性
      const injectedProps: InjectedProps = {
        name: 'John',
        age: 25,
      };

      // 将注入的属性与原始组件的属性合并
      const props = { ...injectedProps, ...this.props };

      // 渲染被包装的组件，并传递属性
      return <WrappedComponent {...props} />;
    }
  };
}

// 使用 HOC
interface MyComponentProps {
  message: string;
}

class MyComponent extends React.Component<MyComponentProps & InjectedProps> {
  render() {
    const { message, name, age } = this.props;
    return (
      <div>
        <p>{message}</p>
        <p>Name: {name}</p>
        <p>Age: {age}</p>
      </div>
    );
  }
}

// 使用 withInjectedProps 包装 MyComponent
const EnhancedComponent = withInjectedProps(MyComponent);

// 渲染增强后的组件
const App = () => {
  return <EnhancedComponent message="Hello!" />;
};