如何为React自定义Button组件添加as属性实现多组件渲染？

核心思路很直接：让组件接收as参数指定要渲染的元素/自定义组件，默认值设为原生button，把组件接收的所有props传递给这个动态渲染的元素，同时排除as自身（避免传给DOM元素引发报错）。

基础JavaScript实现 #

import React from 'react';

const Button = ({ as: Component = 'button', ...props }) => {
  return <Component {...props} />;
};

export default Button;

使用示例 #

// 默认渲染原生按钮
<Button onClick={() => console.log('点击触发')}>原生按钮</Button>

// 渲染a标签作为链接
<Button as="a" href="/home" target="_blank">跳转到首页</Button>

// 渲染自定义组件
const CustomCardLink = ({ children, ...props }) => {
  return <a className="card-link" {...props}>{children}</a>;
};

<Button as={CustomCardLink} href="/profile">自定义卡片链接</Button>

TypeScript版本（带类型约束） #

如果用TS开发，可以给as属性加上类型校验，确保传入的是合法React组件或HTML标签：

import React, { ComponentProps, ElementType } from 'react';

type ButtonProps<T extends ElementType> = {
  as?: T;
} & ComponentProps<T>;

const Button = <T extends ElementType = 'button'>({
  as: Component = 'button' as T,
  ...props
}: ButtonProps<T>) => {
  return <Component {...props} />;
};

export default Button;

注意事项 #

• 传递原生HTML标签时，要确保props是该标签支持的属性（比如给a标签传href，不要传不兼容的属性）
• 自定义组件要能接收并处理你传递的props
• 组件库中as属性的使用示例：
  

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