React问题：CSVLink嵌套在DropdownButton的MenuItem中无法正常工作

我之前也碰到过一模一样的问题，核心原因是旧版本的react-bootstrap MenuItem组件会在点击时调用event.preventDefault()，而CSVLink本质是一个带有下载逻辑的<a>标签，它的默认行为被MenuItem的事件处理给阻断了，所以点击后没反应。

下面给你两种可行的解决方案，按需选择：

方案一：手动触发CSVLink的点击事件（适配你当前的MenuItem代码） #

通过useRef获取CSVLink的实例，然后在MenuItem的点击事件里手动触发它的下载逻辑，同时阻止MenuItem的默认行为避免干扰：

首先引入useRef：

import { useRef } from 'react';
import {Dropdown, DropdownButton, MenuItem} from "react-bootstrap";
import {CSVLink} from "react-csv";

然后在组件内部创建ref并修改菜单结构：

export default function YourComponent() {
  const firstCsvRef = useRef(null);
  const secondCsvRef = useRef(null);

  return (
    <DropdownButton id={'sdfsd'} title={ <> <img src={exportIcon}/>Export </> }>
      <MenuItem onClick={(e) => {
        // 阻止MenuItem的默认点击行为，避免阻断CSVLink的下载
        e.preventDefault();
        // 手动触发CSVLink的点击
        firstCsvRef.current?.click();
      }}>
        <CSVLink ref={firstCsvRef} data={myCsvData} filename={`first-case.csv`}>First Case</CSVLink>
      </MenuItem>
      <MenuItem onClick={(e) => {
        e.preventDefault();
        secondCsvRef.current?.click();
      }}>
        <CSVLink ref={secondCsvRef} data={mySecondCsvData} className="link" filename={`second-case.csv`}>Second Case</CSVLink>
      </MenuItem>
    </DropdownButton>
  )
}

方案二：替换为新版本的Dropdown.Item（推荐） #

如果你的react-bootstrap版本是v4及以上，官方已经废弃了MenuItem，推荐使用Dropdown.Item组件，它默认不会阻止内部链接的默认行为，直接嵌套CSVLink就能正常工作：

先修改导入语句：

import {Dropdown, DropdownButton} from "react-bootstrap"; // 去掉MenuItem的导入
import {CSVLink} from "react-csv";

然后更新菜单结构：

<DropdownButton id={'sdfsd'} title={ <> <img src={exportIcon}/>Export </> }>
  <Dropdown.Item>
    <CSVLink data={myCsvData} filename={`first-case.csv`}>First Case</CSVLink>
  </Dropdown.Item>
  <Dropdown.Item>
    <CSVLink data={mySecondCsvData} className="link" filename={`second-case.csv`}>Second Case</CSVLink>
  </Dropdown.Item>
</DropdownButton>

这个方案更简洁，也符合react-bootstrap的最新用法，建议优先尝试。

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