React 18中创建react-bootstrap风格嵌套组件的类型错误咨询

要实现类似react-bootstrap中<Card>嵌套<Card.Title>的组件结构，核心是给主组件添加静态子组件属性，并通过TypeScript扩展类型消除错误，具体步骤如下：

1. 定义组件Props和子组件 #

先分别定义主组件的Props类型，以及子组件（比如Header）的实现：

import React from 'react';

// 主组件的Props类型
interface MyCustomComponentProps {
  children?: React.ReactNode;
  // 可添加自定义Props，比如className、style等
}

// 子组件Header的实现
const MyCustomComponentHeader: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
  return <h2 className="custom-component-header">{children}</h2>;
};

2. 扩展主组件类型并实现主组件 #

默认的React.FC类型不包含静态属性定义，需要通过交叉类型给主组件添加Header属性的类型，再实现主组件并挂载子组件：

// 定义主组件的完整类型：FC + 静态Header属性
type MyCustomComponent = React.FC<MyCustomComponentProps> & {
  Header: typeof MyCustomComponentHeader;
};

// 实现主组件
const MyCustomComponent: MyCustomComponent = ({ children }) => {
  return <div className="custom-component">{children}</div>;
};

// 将Header挂载为主组件的静态属性
MyCustomComponent.Header = MyCustomComponentHeader;

3. 使用组件 #

现在就可以像react-bootstrap那样嵌套使用了：

// 调用示例
<MyCustomComponent>
  <MyCustomComponent.Header>自定义标题</MyCustomComponent.Header>
  <p>这里是组件内容</p>
</MyCustomComponent>

额外说明 #

• 如果需要多个子组件（比如Body、Footer），只需在交叉类型中添加对应属性定义，再挂载即可：

  type MyCustomComponent = React.FC<MyCustomComponentProps> & {
    Header: typeof MyCustomComponentHeader;
    Body: typeof MyCustomComponentBody;
    Footer: typeof MyCustomComponentFooter;
  };
  

• 子组件可以有专属Props，只需修改子组件的FC泛型参数，比如给Header添加color属性：

  const MyCustomComponentHeader: React.FC<{ children?: React.ReactNode; color?: string }> = ({ children, color = "black" }) => {
    return <h2 className="custom-component-header" style={{ color }}>{children}</h2>;
  };
  

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