React中createRef().current返回null，CSVLink触发下载失败如何解决

出现this.csvLink.current为null的核心原因是CSVLink组件没有在触发handleClick时完成挂载，常见场景有两类：

• 你写的renderDownloadedData方法没有被放到组件的render()函数返回的JSX结构中，CSVLink从未被渲染到DOM树，对应的ref自然没有绑定对象
• 你对renderDownloadedData做了条件渲染，只有groupDataDownloadResp有值时才渲染组件：首次触发handleClick时，setState更新状态后，React的DOM更新是异步的，setState回调触发时CSVLink还没完成挂载，ref还未赋值

按优先级提供两种可落地的方案：

方案1：提前挂载CSVLink（最兼容你现有代码的方案） #

1. 首先在组件的render()函数中显式调用renderDownloadedData，确保CSVLink被正常渲染，示例代码如下：

render() {
  return (
    <div>
      {/* 原有表格组件代码保持不变 */}
      <TableWithHeaders
        tableHeaders = {tableData.tableHeaders}
        rowData = {tableData.rowData}
        formatter = {tableData.formatter}
        handleClick = {this.handleClick}
        clickable = {tableData.clickable}
        page = {rowsPerPage}
        rowsPerPage = {rowsPerPage}
        handlePageChange = {this.handlePageChange}
        handleChangeRowsPerPage = {this.handleChangeRowsPerPage}
      />
      {/* 新增这行，挂载CSVLink组件 */}
      {this.renderDownloadedData()}
    </div>
  )
}

2. 在组件初始化state时，给groupDataDownloadResp赋值空数组，不要留空或者设为null，避免条件渲染导致组件初始不挂载：

state = {
  groupDataDownloadResp: [],
  // 其他原有state属性
}

修改后CSVLink会在组件初始化时就完成挂载，ref正常绑定，触发点击时不会再出现null的问题。

方案2：直接调用下载API（无需维护ref和CSVLink组件） #

如果你使用的是react-csv库，可以直接调用内置的csvDownload方法实现下载，完全不需要渲染CSVLink组件和维护ref，代码更简洁：

// 顶部引入方法
import { csvDownload } from 'react-csv';

handleClick = (rowData, clickComponent,e) => {
  const storageGroupDto = StorageGroupHelpers.convertStorageGroupDataToDto(rowData)
  const fileName = createFileNameForCSVDownload('STORAGE_GROUP_DOWNLOAD', getWarehouseIdFromRedux(this.props))
  // 直接调用下载，不需要ref和CSVLink
  csvDownload(storageGroupDto, fileName);
}

采用这个方案可以直接删除原有csvLinkref定义、renderDownloadedData方法，避免ref相关的所有问题。

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