React中点击按钮下载字符串为文本文件每次渲染仅生效一次？

问题原因 #

你当前的代码存在两个核心问题导致下载仅能触发一次：

• 每次点击都会创建带**固定id download-link**的<a>标签并追加到body，但DOM中不允许存在多个相同id的元素，后续创建的元素会与已存在的同id元素产生冲突，导致浏览器无法正确触发点击事件。
• 未释放URL.createObjectURL创建的Blob URL，虽然不会直接导致下载失效，但会造成内存泄漏。

解决方案1：每次创建后立即清理元素（推荐简单场景） #

去掉固定id，点击完成后立即移除创建的<a>标签，并释放Blob URL：

const downloadFile = () => {
  const element = document.createElement("a");
  // 无需设置固定id，避免重复冲突
  const file = new Blob([content], { type: "text/plain" });
  const blobUrl = URL.createObjectURL(file);
  
  element.href = blobUrl;
  element.download = "mySubtitles.vtt";

  document.body.appendChild(element);
  element.click();

  // 关键：清理DOM元素+释放Blob URL
  document.body.removeChild(element);
  URL.revokeObjectURL(blobUrl);
};

解决方案2：复用单个<a>标签（适合频繁下载场景） #

通过React的useRef复用同一个<a>标签，避免重复创建DOM元素：

import { useRef, useEffect } from 'react';

function YourComponent() {
  // 假设content是组件状态中的字符串
  const content = /* 你的状态字符串 */;
  const downloadLinkRef = useRef(null);

  const downloadFile = () => {
    // 首次点击时创建并挂载a标签
    if (!downloadLinkRef.current) {
      const link = document.createElement("a");
      downloadLinkRef.current = link;
      document.body.appendChild(link);
    }

    const file = new Blob([content], { type: "text/plain" });
    const blobUrl = URL.createObjectURL(file);
    
    downloadLinkRef.current.href = blobUrl;
    downloadLinkRef.current.download = "mySubtitles.vtt";
    downloadLinkRef.current.click();

    URL.revokeObjectURL(blobUrl);
  };

  // 组件卸载时清理DOM元素
  useEffect(() => {
    return () => {
      if (downloadLinkRef.current) {
        document.body.removeChild(downloadLinkRef.current);
      }
    };
  }, []);

  return <button onClick={downloadFile}>下载字幕文件</button>;
}

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