使用React forwardRef挂载复合组件 解决属性不存在于forwardRefExoticComponent报错

问题原因 #

React.forwardRef返回的组件类型默认不包含后续手动挂载的静态属性定义，TypeScript无法识别你追加在Panel上的Header、Content两个子组件，因此抛出类型错误。同时你之前错误地将静态属性的类型定义放在了组件入参props的继承规则中，属于冗余定义。

修复方案 #

按以下步骤修改Panel组件的类型定义即可：

1. 移除PanelProps中不需要的ModalPropsComposition继承
2. 单独定义包含静态属性的Panel完整类型
3. 将React.forwardRef返回的组件断言为该完整类型

修改后的核心代码：

// 移除PanelProps中的ModalPropsComposition继承，这两个属性不是组件入参
export interface PanelProps
  extends React.HTMLAttributes<HTMLDivElement> {
  open: boolean;
  position?: string;
  renderPortal?: boolean;

  // Lifecycle callbacks
  onClose?: () => void;
  onClosed?: () => void;
  onOpen?: () => void;
  onOpened?: () => void;
}

// 定义包含静态子组件的Panel完整类型
type PanelComponent = React.ForwardRefExoticComponent<
  PanelProps & React.RefAttributes<HTMLDivElement>
> & {
  Header: typeof PanelHeader;
  Content: typeof PanelContent;
};

const _Panel = ({
  children,
  open,
  renderPortal,
  onClose,
  onClosed,
  onOpen,
  onOpened,
  forwardedRef
}: PanelProps & { forwardedRef: React.Ref<HTMLDivElement> }): JSX.Element => {
  // panel code...
};

// 将forwardRef的返回值断言为我们定义的PanelComponent类型
export const Panel = React.forwardRef(
  (props: PanelProps, ref: React.Ref<HTMLDivElement>): JSX.Element => {
    return <_Panel {...props} forwardedRef={ref} data-testid={PANEL_TEST_ID} />;
  }
) as PanelComponent;

Panel.Header = PanelHeader;
Panel.Content = PanelContent;

修改后TypeScript就能正确识别Panel.Header和Panel.Content两个静态子组件，报错会消失，原有功能逻辑完全不受影响。

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