Question

我想在react-application（create-react-app）中的csv文件中写入或覆盖数据（或插入行）。我现在的App.js文件是 -

import React, { Component} from 'react';

const csvData =[
  ['Ahmed', 'Tomi' , 'ah@smthing.co.com'] ,
  ['Raed', 'Labes' , 'rl@smthing.co.com'] ,
  ['Yezzi','Min l3b', 'ymin@cocococo.com']
];

export default class App extends Component {

    render() {
        return(
            <div>
            </div>
            );
    }

}

在这里，我想在我的react-application中将csvData插入名为data.csv的csv文件中

我的data.csv现在是：

Name,NickName,Email
Rahul B.,Rah,bbh@smthing.co.com
Abhinav K.,Abhi,xyzh@smthing.co.com
Akshay G.,Aksh,abc@smthing.co.com

其中

Name,NickName,Email

是我的csv文件的标题。

我希望我的data.csv看起来像 -

Name,NickName,Email
Rahul B.,Rah,bbh@smthing.co.com
Abhinav K.,Abhi,xyzh@smthing.co.com
Akshay G.,Aksh,abc@smthing.co.com
Ahmed, Tomi , ah@smthing.co.com
Raed, Labes , rl@smthing.co.com
Yezzi,Min l3b,ymin@cocococo.com

那么如何使用我的App组件（React组件）更新data.csv。

提前致谢。

Answer 1

您可以使用此库这对我很有帮助

https://www.npmjs.com/package/react-csv

请注意使用此命令安装库

npm i react-csv

import {CSVLink, CSVDownload} from 'react-csv';

const csvData =[
  ['firstname', 'lastname', 'email'] ,
  ['Ahmed', 'Tomi' , 'ah@smthing.co.com'] ,
  ['Raed', 'Labes' , 'rl@smthing.co.com'] ,
  ['Yezzi','Min l3b', 'ymin@cocococo.com']
];

<CSVLink data={csvData} >Download me</CSVLink>
// or
<CSVDownload data={csvData} target="_blank" />

如何在单页面应用程序（React JS）中的csv文件中写入数据？

1 个答案: