在Typescript中处理高阶组件中的道具

import React, { ComponentType } from 'react';

interface HigherOrderProps {
  // 定义高阶组件的属性类型
  hocProp: string;
}

const higherOrderComponent = <P extends object>(
  WrappedComponent: ComponentType<P>
) => {
  // 返回一个新的组件
  const EnhancedComponent: React.FC<P & HigherOrderProps> = (props) => {
    // 在这里处理高阶组件的逻辑
    const { hocProp, ...restProps } = props;
    // 可以在这里对props进行修改或添加新的属性

    return <WrappedComponent {...restProps as P} />;
  };

  return EnhancedComponent;
};

interface TargetComponentProps {
  // 定义目标组件的属性类型
  targetProp: string;
}

const TargetComponent: React.FC<TargetComponentProps> = (props) => {
  // 目标组件的实现
  return <div>{props.targetProp}</div>;
};

const EnhancedTargetComponent = higherOrderComponent(TargetComponent);

// 使用高阶组件包裹目标组件，并传递道具
const App: React.FC = () => {
  return (
    <EnhancedTargetComponent
      targetProp="Hello, World!"
      hocProp="HOC Prop"
    />
  );
};