Styled Component条件标签：按钮/链接动态切换实现方案问询

当然有可行的实现方案，基于你使用的styled-components，这里提供两种简洁易维护的方式：

方式一：利用styled-components的as多态属性（推荐） #

先定义通用的基础样式组件，再通过上层组件根据props自动切换渲染标签：

import styled from 'styled-components';
import { ReactNode } from 'react';

// 定义所有共用的按钮样式
const BaseButtonStyled = styled.button`
  // 在这里写你的大量样式，比如：
  padding: 10px 20px;
  border-radius: 6px;
  border: 0;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s;
  /* 其他样式... */
`;

// 定义组件的Props类型，兼容button和a标签的属性
type FlexibleButtonProps = {
  children: ReactNode;
  href?: string;
  // 可添加其他自定义属性，比如icon、disabled等
} & (
  | React.ButtonHTMLAttributes<HTMLButtonElement>
  | React.AnchorHTMLAttributes<HTMLAnchorElement>
);

export const FlexibleButton = ({ href, ...restProps }: FlexibleButtonProps) => {
  // 根据是否传入href来决定渲染的标签
  if (href) {
    return <BaseButtonStyled as="a" href={href} {...restProps} />;
  }
  return <BaseButtonStyled {...restProps} />;
};

使用方式：

// 作为按钮使用
<FlexibleButton onClick={() => console.log('点击按钮')}>
  <Icon /> 操作按钮
</FlexibleButton>

// 作为链接使用
<FlexibleButton href="/page/to/link">
  <Icon /> 跳转链接
</FlexibleButton>

方式二：动态创建Styled组件 #

直接根据props动态指定要渲染的标签类型：

import styled from 'styled-components';
import { ReactNode } from 'react';

// 动态选择标签并应用样式
const StyledButtonOrLink = styled(({ href, ...props }) => 
  href ? <a {...props} /> : <button {...props} />
)`
  // 这里写所有共用的样式，和方式一的BaseButtonStyled一致
  padding: 10px 20px;
  border-radius: 6px;
  /* 其他样式... */
`;

type FlexibleButtonProps = {
  children: ReactNode;
  href?: string;
} & (
  | React.ButtonHTMLAttributes<HTMLButtonElement>
  | React.AnchorHTMLAttributes<HTMLAnchorElement>
);

export const FlexibleButton = (props: FlexibleButtonProps) => {
  return <StyledButtonOrLink {...props} />;
};

注意事项 #

• 你原来的代码写法styled.(link ? a : button)存在语法错误，styled-components不支持这种写法，上述两种方式都是符合官方规范的实现。
• 两种方式都能完全复用你已有的大量样式，无需重复编写。
• 类型定义兼容了button和a标签的原生属性，保证开发时的类型提示和安全性。

内容的提问来源于stack exchange，提问作者Анна