基于React、Styled Components和TypeScript的多态Link组件实现问题

你的核心需求是构建一个默认渲染为<a>标签的组件，同时支持传入React Router DOM/Next.js的Link作为渲染载体，并且在类型层面严格约束props——比如用原生<a>时不能传to，用Router Link时不能传href。

问题分析 #

当前代码的类型定义存在重复合并、约束不严谨的问题，且未充分利用Styled Components本身对as属性的类型支持。我们需要重新梳理类型逻辑，确保不同as组件的props被正确校验。

完整实现代码 #

import styled from 'styled-components';
import type { ElementType, ComponentPropsWithoutRef } from 'react';

// 基础样式组件，利用Styled Components的As属性支持动态替换渲染标签/组件
const StyledLink = styled.a`
  align-items: center;
  color: ${({ theme }: { theme: Theme }) => theme.primary.step10};
`;

// 自定义扩展属性，与基础组件props分离
type LinkExtensionProps = {
  Icon?: IconType;
  selected?: boolean;
  disabled?: boolean;
};

// 核心Props类型：根据传入的as组件，合并扩展属性与对应组件的props，并排除冲突属性
type CustomLinkProps<C extends ElementType = 'a'> = LinkExtensionProps & 
  ComponentPropsWithoutRef<C> &
  // 关键：根据as的类型，排除冲突的props
  (C extends 'a' 
    ? { to?: never }  // 当as是原生a时，不允许传to
    : C extends typeof import('react-router-dom').Link 
      ? { href?: never }  // 当as是React Router Link时，不允许传href
      : {});

// 最终组件实现
export const NewLink = <C extends ElementType = 'a'>({
  as,
  Icon,
  selected,
  disabled,
  children,
  ...restProps
}: CustomLinkProps<C>) => {
  // 可选：处理disabled状态的渲染逻辑
  if (disabled) {
    return <span>{children}</span>;
  }

  return (
    <StyledLink as={as} {...restProps}>
      {Icon && <Icon />}
      {children}
    </StyledLink>
  );
};

类型约束验证 #

使用时TypeScript会自动进行严格校验：

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

export const TestComp = () => {
  return (
    <div>
      {/* ✅ 合法：原生a标签，传href */}
      <NewLink href="https://google.com">Hi</NewLink>
      {/* ❌ 报错：原生a标签不允许传to */}
      <NewLink as="a" to="/home">Hi</NewLink>
      
      {/* ✅ 合法：React Router Link，传to */}
      <NewLink as={Link} to="/home">Hi</NewLink>
      {/* ❌ 报错：React Router Link不允许传href */}
      <NewLink as={Link} href="https://google.com">Hi</NewLink>
    </div>
  );
};

关键说明 #

1. Styled Components的as属性：Styled Components原生支持as属性动态替换渲染元素，且会自动继承对应元素/组件的props类型，我们只需在此基础上叠加自定义约束即可。
2. 条件类型排除冲突props：通过C extends 'a'和C extends typeof Link的条件判断，在类型层面直接禁用冲突属性，确保类型安全。
3. 分离扩展属性：将自定义的Icon、selected、disabled等属性与基础组件props分离，避免类型混淆。

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