如何用TypeScript/ReactJS实现带类型的点表示法函数组件

问题核心：React.FC 是标准的函数组件类型，默认不包含自定义静态属性（比如Item），所以直接给类型为React.FC<DefaultProps>的ThreeDotMenu赋值Item会触发类型检查错误。

以下是两种可行的解决方式：

方式一：扩展组件类型并断言 #

先定义包含Item属性的组件类型，再给实现后的组件添加属性并断言类型：

import React from 'react';

// 你的默认Props定义
export interface DefaultProps {
    children: Array<React.ReactNode>|React.ReactNode
}

// 定义Item组件的Props（按需调整）
interface ItemProps {
    children: React.ReactNode;
    // 可添加Item需要的其他属性
}

// 实现Item组件
const Item: React.FC<ItemProps> = ({ children }) => {
    return <div className="three-dot-menu-item">{children}</div>;
};

// 定义包含Item属性的ThreeDotMenu组件类型
type ThreeDotMenuComponent = React.FC<DefaultProps> & {
    Item: typeof Item;
};

// 实现ThreeDotMenu父组件
const ThreeDotMenu: React.FC<DefaultProps> = ({ children }) => {
    return <div className="three-dot-menu">{children}</div>;
};

// 给父组件添加Item属性，并断言类型
(ThreeDotMenu as ThreeDotMenuComponent).Item = Item;

// 导出类型正确的组件
export default ThreeDotMenu as ThreeDotMenuComponent;

方式二：函数声明+类型合并 #

用函数声明定义父组件，添加静态属性后通过类型合并导出：

import React from 'react';

export interface DefaultProps {
    children: Array<React.ReactNode>|React.ReactNode
}

interface ItemProps {
    children: React.ReactNode;
}

const Item: React.FC<ItemProps> = ({ children }) => {
    return <div className="three-dot-menu-item">{children}</div>;
};

// 函数声明定义父组件
function ThreeDotMenu({ children }: DefaultProps) {
    return <div className="three-dot-menu">{children}</div>;
}

// 添加Item静态属性
ThreeDotMenu.Item = Item;

// 导出时合并类型，让TS识别Item属性
export default ThreeDotMenu as typeof ThreeDotMenu & {
    Item: typeof Item;
};

两种方式都能让你正常通过<ThreeDotMenu.Item>调用子组件，同时TS会正确校验所有属性类型。

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