React带Bearer token下载的AuthLink组件消除a标签href告警咨询

方案1：替换为button元素（最符合语义与可访问性规范，推荐） #

你的交互本质是点击触发下载动作，并非跳转至其他页面，用button元素语义更准确，天然支持键盘操作，也不会触发anchor-is-valid告警。你可以调整button的样式匹配链接外观，同时优化原有逻辑，无需将下载用的锚点暴露在可见DOM中：

import { getUrl } from 'config/config';
import { useAuth } from 'oidc-react';

const AuthLink = ({ attachment, children }) => {
  const { userData } = useAuth();

  const handleAction = async e => {
    const fullUrl = getUrl(attachment.path);
    const result = await fetch(fullUrl, {
      headers: {
        Authorization: `Bearer ${userData?.access_token}`,
      },
    });

    const blob = await result.blob();
    const href = window.URL.createObjectURL(blob);
    
    // 动态创建临时a标签触发下载，无需绑定ref到可见元素
    const tempLink = document.createElement('a');
    tempLink.download = attachment.name;
    tempLink.href = href;
    tempLink.click();
    // 用完释放内存，避免内存泄漏
    window.URL.revokeObjectURL(href);
  };

  return (
    <button 
      onClick={handleAction}
      style={{ 
        background: 'none', 
        border: 'none', 
        color: 'blue', 
        textDecoration: 'underline', 
        cursor: 'pointer',
        padding: 0,
        font: 'inherit'
      }}
    >
      {children}
    </button>
  );
};

export default AuthLink;

你可以根据项目的设计系统调整button的样式，完全复刻链接的视觉效果。

方案2：保留a标签，补充href并阻止默认行为 #

如果一定要用a标签实现，可以给标签加href="#"，同时在点击事件开头阻止默认跳转行为，不会影响原有下载逻辑：

import { getUrl } from 'config/config';
import { useAuth } from 'oidc-react';
import { createRef } from 'react';

const AuthLink = ({ attachment, children }) => {
  const link = createRef();

  const { userData } = useAuth();

  const handleAction = async e => {
    // 阻止默认的锚点跳转行为
    e.preventDefault();
    const fullUrl = getUrl(attachment.path);

    if (link.current.href) return;

    const result = await fetch(fullUrl, {
      headers: {
        Authorization: `Bearer ${userData?.access_token}`,
      },
    });

    const blob = await result.blob();
    const href = window.URL.createObjectURL(blob);

    link.current.download = attachment.name;
    link.current.href = href;
    link.current.click();
  };

  return (
    <a 
      role="button" 
      ref={link} 
      onClick={handleAction}
      href="#"
    >
      {children}
    </a>
  );
};

export default AuthLink;

之前加href后逻辑异常就是因为没有阻止默认的跳转行为，加上e.preventDefault()即可解决。

可选临时方案：单行忽略ESLint告警 #

如果不想修改原有逻辑，可以在a标签行前加ESLint忽略注释，不过该方案不符合可访问性规范，不推荐长期使用：

{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a role="button" ref={link} onClick={handleAction}>
  {children}
</a>

内容的提问来源于stack exchange，提问作者Enrique Moreno Tent