React中能否将<Link>的href传入自定义<a>组件？

要让<Link>的href传递到PrimaryAnchor内部的<a>标签，有以下几种可行方法：

方法一：利用Link的passHref属性（适用于Next.js等带passHref的Link组件） #

如果你的<Link>是Next.js提供的组件，只需添加passHref属性，它会自动将href传递给直接子组件的props。你的PrimaryAnchor已经通过...props把所有接收的属性透传给内部的<a>，所以只需修改主组件代码：

<Link href={'test'} passHref>
  <PrimaryAnchor>Welcome</PrimaryAnchor>
</Link>

PrimaryAnchor无需修改，因为它已经通过...props将包括href在内的属性传递给了<a>标签。

方法二：手动传递href属性 #

如果不想依赖passHref，可以直接在PrimaryAnchor上显式传递href，同样利用组件的props透传能力：

<Link href={'test'}>
  <PrimaryAnchor href={'test'}>Welcome</PrimaryAnchor>
</Link>

这种方式直观，但需要重复写href值，适合简单场景。

方法三：自定义Link组件透传href（适用于自定义Link） #

如果你的<Link>是自定义组件，可修改Link内部逻辑，将href克隆传递给子元素：

// 自定义Link组件示例
import React from 'react';

const Link = ({ href, children }) => {
  // 克隆子元素并传递href属性
  return React.cloneElement(React.Children.only(children), { href });
};

主组件保持原有写法即可，PrimaryAnchor会自动接收到href并传递给内部<a>。

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