React TypeScript中如何限制SVG组件的子元素类型

首先修正你原类型定义的问题：你当前的SvgPropsType里的props字段冗余且不符合解构逻辑，正确的做法是将自定义属性与SVG根元素的props合并，同时覆盖children的类型以实现限制。

要限制children仅接受合法SVG子元素，可以利用TypeScript中SVGElement作为所有SVG元素基类的特性，将children类型指定为React.ReactElement<SVGElement>（支持单个元素或数组）。

修改后的完整代码如下：

import React, { SVGProps } from 'react';

type SvgPropsType = {
  w: number;
  h: number;
} & Omit<SVGProps<SVGSVGElement>, 'children' | 'width' | 'height' | 'viewBox'> & {
  children: React.ReactElement<SVGElement> | React.ReactElement<SVGElement>[];
};

const Svg = ({ w, h, children, ...props }: SvgPropsType) => {
  return (
    <svg
      {...props}
      xmlns='http://www.w3.org/2000/svg'
      width={w}
      height={h}
      viewBox={`0 0 ${w} ${h}`}
    >
      {children}
      <line />
    </svg>
  );
};

关键说明： #

• Omit<SVGProps<SVGSVGElement>, 'children' | 'width' | 'height' | 'viewBox'>：排除掉组件自定义的width、height、viewBox（由w、h生成）以及默认的children类型，避免类型冲突。
• React.ReactElement<SVGElement>：匹配所有SVG元素对应的React节点（如<line>、<polygon>、<circle>等），确保传入的children只能是合法的SVG子元素。

如果需要支持将多个SVG元素包裹在React片段（<>）中，可以调整children类型为：

children: React.ReactElement<SVGElement> | React.ReactElement<SVGElement>[] | React.ReactFragment;

注意：片段内部仍需保证都是合法SVG元素，TypeScript不会自动检查片段内的元素类型，若要最严格的限制，建议仅允许直接传入单个或数组形式的SVG元素。

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