从反应中逐行读取本地 .csv 文件答案

【问题标题】：Reading a local .csv file from react line by line从反应中逐行读取本地 .csv 文件
【发布时间】：2017-08-11 02:17:25
【问题描述】：

我在本地机器上有一个我想阅读的文件。我正在使用create-react-app 创建我的react 应用程序。

const csv =require('/path/to/csv')

该文件基本上是这样的.csv：

IBM, .025
GE, .33
etc

我想逐行阅读此文件。我不知道该怎么做。在看起来像这样的应用程序中调用其他任何内容之前，需要先解析该文件

import React from 'react';
import ReactDOM from 'react-dom';

const csv =require('/path/to/csv');

const App = React.createClass({
   // I would like to have the file read before stuff in here gets called
});

const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

【问题讨论】：

如果你使用 webpack，这个加载器 github.com/theplatapi/csv-loader 可能会有所帮助
无法使 readTextFile 工作。我可以在浏览器中输入路径，然后我会看到文本文件的内容。但以编程方式我无法让它工作。使用 Chrome。
我得到 file:///D:/Documents/js/table-example1/src/optimal.csv。跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。
我放弃了。由于我控制文件的写入，因此我将使用开箱即用的 json。
Read a CSV file line-by-line using node.js and ES6/ES7 features的可能重复

标签： reactjs

【解决方案1】：

这可能不是最优雅的解决方案，但我同样不得不处理这个问题。我发现，在需要包并将其呈现在隐藏元素中之后，我能够访问它...

HTML：

<div id="hidden-element-id"></div>

ReactJS：

import ReactDOM from 'react-dom';

ReactDOM.render(require('yourfile'), document.getElementByID('hidden-element-id'));

JavaScript：

var sourcefile = $('#hidden-element-id').html();

【讨论】：