在TypeScript中强制React组件仅接收原生HTML元素作为子元素

要实现让React组件只接受原生HTML元素（如<p>、<div>）作为子元素，同时拒绝自定义React组件，可以通过TypeScript的类型约束区分原生元素与自定义组件的核心差异：原生HTML元素的type是字符串类型的标签名（如"p"），而自定义组件的type是函数或类。

正确的类型定义与组件实现 #

import React from "react"

// 定义仅包含原生HTML元素的类型
type IntrinsicElement = React.ReactElement<unknown, keyof JSX.IntrinsicElements>;

interface ITooltipProps {
  // 约束children必须是单个原生HTML元素
  children: IntrinsicElement;
  // 如果需要支持多个原生元素，可以改为：
  // children: IntrinsicElement | IntrinsicElement[];
}

export function Tooltip({ children }: ITooltipProps) {
  return (
    <div>
      {children}
    </div>
  )
}

// 自定义组件（会被类型检查拒绝）
const F = () => {
  return (
    <>
      <p>Hello</p>
      <p>World</p>
    </>
  )
}

// ✅ 合法：传入原生HTML元素
const validUsage = (
  <Tooltip>
    <p>这是原生段落</p>
  </Tooltip>
)

// ❌ 报错：传入自定义组件，不符合类型约束
const invalidUsage = (
  <Tooltip>
    <F/>
  </Tooltip>
)

为什么之前的尝试无效 #

你之前使用的React.ReactElement<JSX.IntrinsicElements[keyof JSX.IntrinsicElements]>仅约束了元素的props类型，并未限制元素本身的type必须是原生HTML标签名。自定义组件也可以接收符合原生HTML props的参数，因此无法区分两者。

而keyof JSX.IntrinsicElements直接对应所有原生HTML标签名（字符串类型），通过将React元素的第二个泛型参数指定为该类型，就能强制子元素必须是原生HTML元素。

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