React组件如何传递as props并渲染对应HTML标签或Link组件？

核心思路 #

通过动态判断as props的值，选择对应的渲染元素：

• 当as="link"时，使用react-router-dom的Link组件
• 其他情况直接使用传入的HTML标签名字符串作为渲染元素

完整实现代码 #

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

const CustomComponent = ({ as = 'div', ...props }) => {
  // 确定要渲染的元素类型
  const Element = as === 'link' ? Link : as;
  
  // 渲染动态元素并传递剩余props
  return <Element {...props} />;
};

export default CustomComponent;

使用示例 #

// 渲染<div>元素
<CustomComponent as="div" className="container">
  这是一个div容器
</CustomComponent>

// 渲染<span>元素
<CustomComponent as="span" style={{ color: 'red' }}>
  这是红色的span文本
</CustomComponent>

// 渲染react-router-dom的Link组件
<CustomComponent as="link" to="/about">
  跳转到关于页面
</CustomComponent>

关键说明 #

• 给as设置默认值'div'，确保即使不传入该props也能正常渲染
• 使用剩余参数...props收集所有其他传入的属性，统一传递给动态元素
• React允许直接使用字符串作为元素类型（如'div'、'span'），会自动渲染对应的HTML标签；当使用组件（如Link）时，需确保组件是大写开头的（Link本身符合React组件命名规范）

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