在React应用中可靠追踪链接打开事件并执行异步操作

import React, { useRef, useEffect, useCallback, MouseEvent } from 'react';
import { FaExternalLinkAlt } from 'react-icons/fa'; // 假设使用一个外部链接图标

interface TrackedLinkProps {
  href: string;
  payload: Record<string, any>; // 需要发送的POST请求载荷
  children?: React.ReactNode;
}

const TrackedLink: React.FC<TrackedLinkProps> = ({ href, payload, children }) => {
  const linkRef = useRef<HTMLAnchorElement>(null);

  const sendTrackingData = useCallback(async (clickType: number) => {
    console.log(`Tracking click type: ${clickType} for href: ${href}`);
    console.log('Sending payload:', payload);

    try {
      // 模拟发送POST请求
      const response = await fetch('/api/track-link-open', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          link: href,
          clickType: clickType, // 0: 左键, 1: 中键, 2: 右键
          ...payload,
        }),
      });

      if (!response.ok) {
        console.error('Failed to send tracking data:', response.statusText);
      } else {
        console.log('Tracking data sent successfully.');
      }
    } catch (error) {
      console.error('Error sending tracking data:', error);
    }
  }, [href, payload]);

  const handleLinkClick = useCallback((event: MouseEvent) => {
    // 阻止链接的默认行为
    event.preventDefault();

    // 根据鼠标按钮类型判断点击方式
    // event.button: 0 (左键), 1 (中键), 2 (右键)
    const clickType = event.button;

    // 执行自定义追踪逻辑
    sendTrackingData(clickType);

    // 编程方式打开链接
    // 检查是否是中键点击或右键上下文菜单打开，通常在新标签页打开
    if (clickType === 1 || clickType === 2 || event.metaKey || event.ctrlKey) {
      window.open(href, '_blank', 'noopener,noreferrer');
    } else {
      // 否则，在当前标签页打开
      window.open(href, '_self');
    }
  }, [href, sendTrackingData]);

  useEffect(() => {
    const linkElement = linkRef.current;
    if (!linkElement) return;

    // 添加事件监听器
    // 注意：我们将所有事件都指向同一个处理函数
    linkElement.addEventListener('click', handleLinkClick);
    linkElement.addEventListener('contextmenu', handleLinkClick);
    linkElement.addEventListener('auxclick', handleLinkClick);

    // 清理函数，移除事件监听器
    return () => {
      linkElement.removeEventListener('click', handleLinkClick);
      linkElement.removeEventListener('contextmenu', handleLinkClick);
      linkElement.removeEventListener('auxclick', handleLinkClick);
    };
  }, [handleLinkClick]); // 依赖项为 handleLinkClick

  return (
    <a
      ref={linkRef}
      href={href}
      target="_blank" // 默认在新标签页打开，但我们会在JS中控制
      rel="noopener noreferrer"
      // 不直接使用onClick等，而是通过useEffect添加原生事件监听器
    >
      {children || <FaExternalLinkAlt />}
    </a>
  );
};

export default TrackedLink;

// 在其他组件中使用
function App() {
  return (
    <div>
      <h1>我的应用</h1>
      <p>
        点击此链接：
        <TrackedLink href="https://example.com" payload={{ userId: '123', page: 'home' }}>
          访问示例网站
        </TrackedLink>
      </p>
      <p>
        另一个链接：
        <TrackedLink href="https://another.com" payload={{ userId: '123', category: 'news' }}>
          阅读新闻
        </TrackedLink>
      </p>
    </div>
  );
}