如何限制React组件的子元素仅为span元素？

你遇到的问题核心是混淆了DOM元素类型和React元素类型：HTMLSpanElement是浏览器中真实DOM节点的类型，而React组件的children需要的是ReactNode类型（包含React元素、文本、Fragment等），直接用DOM类型自然会出现类型不兼容的错误。

下面是两种正确的实现方式：

1. 仅允许单个<span>子元素 #

import React from 'react';

interface MyComponentProps {
  // 使用React.ReactElement指定为span类型的React元素
  children: React.ReactElement<HTMLSpanElement>;
}

export default function MyComponent({ children }: MyComponentProps) {
  return (
    <div>
      {children}
    </div>
  );
}

2. 允许多个<span>子元素（包含单个场景） #

如果需要支持多个span子节点，可将类型定义为单个元素或元素数组：

import React from 'react';

interface MyComponentProps {
  children: React.ReactElement<HTMLSpanElement> | React.ReactElement<HTMLSpanElement>[];
}

export default function MyComponent({ children }: MyComponentProps) {
  return (
    <div>
      {children}
    </div>
  );
}

补充说明 #

• React.ReactElement<HTMLSpanElement> 表示由React创建的<span>元素，完全符合ReactNode的类型要求，不会触发类型错误。
• 这样定义后，当父组件传入非<span>的元素（比如<div>、<p>）时，TypeScript会直接在编译阶段抛出类型错误，实现了预期的限制效果。

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