如何在TypeScript中自定义React子元素类型？

你的核心问题是Tabs组件的children类型定义过于宽泛，导致无法在编译时约束子元素必须是带tabId和title属性的Tab组件，进而出现属性拼写错误只能在运行时发现的问题。以下是具体的解决步骤和代码优化：

1. 明确约束Tabs组件的children类型 #

将TabsProps中的children类型从JSX.Element[]改为React.ReactElement<TabProps>[] | React.ReactElement<TabProps>，让TypeScript强制要求子元素必须是符合TabProps定义的React元素。

修改后的TabsProps：

import { ReactElement } from 'react';
import { TabProps } from './Tab'; // 导入Tab组件的props类型

export interface TabsProps {
  /**
   * Tab contents
   */
  children?: ReactElement<TabProps>[] | ReactElement<TabProps>;
}

2. 优化Tabs组件的渲染逻辑 #

使用React.Children.map替代数组map，它能更好处理children的边界情况（比如单个子元素、null等）。同时因为已经约束了子元素类型，访问tab.props.title和tab.props.tabId时会有完整的类型提示，拼写错误会直接在编译时报错。

修改后的Tabs组件：

import { useState, ReactElement } from 'react';
import { TabProps } from './Tab';

const Tabs: React.FC<TabsProps> = ({ children }) => {
  // 默认选中第一个tab
  const [activeTabId, setActiveTabId] = useState<string | undefined>(
    React.Children.count(children) > 0 
      ? (children as ReactElement<TabProps>).props.tabId 
      : undefined
  );

  const onButtonClicked = (tabId: string) => {
    setActiveTabId(tabId);
  };

  return (
    <div>
      <div className="tab">
        {React.Children.map(children, (tab: ReactElement<TabProps>) => {
          const { title, tabId } = tab.props;
          return (
            <button
              key={tabId}
              className={`tablinks ${activeTabId === tabId ? 'active' : ''}`}
              onClick={() => onButtonClicked(tabId)}
            >
              {title}
            </button>
          );
        })}
      </div>
      {React.Children.map(children, (tab: ReactElement<TabProps>) => {
        const { tabId, children: tabContent } = tab.props;
        return (
          <div
            key={tabId}
            id={tabId}
            className={`tabcontent ${activeTabId === tabId ? 'active' : ''}`}
          >
            {tabContent}
          </div>
        );
      })}
    </div>
  );
};

export default Tabs;

3. 优化Tab组件的定义 #

• 将TabProps中的String改为TypeScript推荐的基本类型string
• 允许Tab的children是单个或多个元素
• Tab组件本身返回null即可，因为它只是作为传递props和内容的容器，实际渲染逻辑由Tabs组件处理

修改后的Tab组件：

export interface TabProps {
  /**
   * Unique tab id
   */
  tabId: string;
  /**
   * Tab title
   */
  title: string;
  /**
   * Tab contents
   */
  children: JSX.Element | JSX.Element[];
}

const Tab: React.FC<TabProps> = () => {
  return null;
};

export default Tab;

效果验证 #

现在如果在Tabs组件中错误地访问tab.props.abc，TypeScript会直接抛出类型错误，提示该属性不存在于TabProps中，彻底避免了运行时才发现的拼写问题。同时，当你在Tabs下添加非Tab组件时，TypeScript也会报错，确保子元素类型的正确性。

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