React Router Link组件作为变量JSX构造函数时为何不支持子元素？

问题重现 #

你可以正常使用带子元素的Link和<button>：

import { Link } from 'react-router-dom';

<Link to=''>
    {content}
</Link>

<button>
    {content}
</button>

当用条件判断定义变量组件时，不带子元素没问题：

import { Link } from 'react-router-dom';

const MyElement = condition ? Link : 'button';

<MyElement />

但添加子元素后触发TypeScript错误：

import { Link } from 'react-router-dom';

const MyElement = condition ? Link : 'button';

<MyElement>
    {content}
</MyElement>

报错信息：

Type '{ children: MyElement; }' has no properties in common with type 'IntrinsicAttributes'.

原因分析 #

TypeScript对typeof Link（React组件类型）和'button'（HTML元素标签字符串）的联合类型推断，只保留了两者的公共属性集合IntrinsicAttributes，而这个类型并不包含children属性定义。因此当你传递children时，TS判定该属性不在允许的公共属性范围内，从而抛出错误。

解决方案 #

方案1：显式指定ElementType类型 #

使用React.ElementType作为变量的类型，它涵盖了所有HTML元素标签和React组件的类型，天然支持children属性：

import { Link } from 'react-router-dom';
import React from 'react';

const MyElement: React.ElementType = condition ? Link : 'button';

<MyElement>
    {content}
</MyElement>

方案2：精确约束组件属性类型 #

如果需要同时支持Link的to属性和<button>的原生属性，可以定义更精确的联合类型，确保包含children：

import { Link, LinkProps } from 'react-router-dom';
import React from 'react';

// 合并LinkProps和button的属性，并强制包含children
type MyElementProps = (LinkProps | React.ButtonHTMLAttributes<HTMLButtonElement>) & {
  children: React.ReactNode;
};

// 显式指定元素类型为ElementType<MyElementProps>
const MyElement = condition ? Link : ('button' as React.ElementType<MyElementProps>);

// 使用时可正常传递对应属性
<MyElement to="/home" onClick={() => console.log('clicked')}>
    {content}
</MyElement>

方案3：直接渲染条件组件 #

如果不需要变量组件的灵活性，直接用条件渲染写法更直观，也能避免类型问题：

import { Link } from 'react-router-dom';

const element = condition ? (
  <Link to="">{content}</Link>
) : (
  <button>{content}</button>
);

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