React项目中用react-csv实现一维数组转置导出列格式CSV

react-csv的data属性要求传入二维数组，每个子数组对应CSV的一行。你当前传入[applicableCriteria]相当于把整个一维数组作为一行的多列，所以导出后是一行数据。要实现单列展示，需要把一维数组的每个元素单独包装成子数组，转成[[元素1], [元素2], ...]的格式。

具体实现步骤： #

• 使用Array.map()将一维数组转换为符合要求的二维数组
• 将转换后的数组传给CSVLink的data属性

完整代码示例： #

import { CSVLink } from 'react-csv';

// 你的一维数组数据
const applicableCriteria = ["1.1.1", "1.1.2", "1.1.3"];

// 转换为单列所需的二维数组格式
const formattedCsvData = applicableCriteria.map(item => [item]);

export default function ExportButton() {
  return (
    <CSVLink data={formattedCsvData}>Download</CSVLink>
  );
}

可选：添加表头 #

如果需要给这一列加表头，可以通过headers属性配置：

<CSVLink 
  data={formattedCsvData}
  headers={[{ label: '标准项编号', key: 'criteria' }]}
>
  Download With Header
</CSVLink>

这样导出的CSV就会是每个元素单独占一行的单列数据了。

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