如何从本地文件获取数据到我的 React 应用程序中？

Question

我有一个我想解析的 txt 文件，并且有一些数据用于填充 React 应用程序的一部分。我一直在用头撞墙，因为据我所知，我不能在 React 中使用 fs（因为它在浏览器环境中运行），也不能使用 AJAX 查看本地文件。

我理解原因，并且我理解围绕 AJAX 和本地文件的安全问题。但是，有什么方法可以让我将这些文本输入到我的应用程序中？

正如我所说，有问题的组件的代码如下，我已经知道在这里使用 fs 是行不通的）。

import React from 'react';
import PropTypes from 'prop-types';
import fs from 'fs';

function StopList (props) {
var firstInstance = new RegExp(`^${props.subway}`);
var stops = [];
function stopNames() {
    fs.readFile('..utils/stops.txt', null, (err, data) => {
        if (err) {
            return console.log(err);
        } else {
            var stopData = data.split('\n');
        }
        stopData.map((line) => {
            if (firstInstance === line.charAt(0)) {
                var firstCommas = line.indexOf(',,');
                var secondCommas = line.indexOf(',,', firstCommas);
                stops.push(line.slice(firstCommas + 2, secondCommas));
            }
        });
    });
}
stopNames();
return (
    <select>
        {
            stops.map((stop) => {
                <option key={stop}>
                    {stop}
                </option>
            })
        }
    </select>
)
}
StopList.PropTypes = {
    stops: React.PropTypes.array.isRequired,
    subway: React.PropTypes.string.isRequired
};

export default StopList;

编辑： 有问题的文件已经在http://web.mta.info/developers/data/nyct/subway/google_transit.zip在线。问题是我不知道如何获取并在线阅读它，因为它位于 zip 目录中。

Answer 1

您使用什么来捆绑您的应用程序？如果您使用的是 Webpack，则可以使用raw-loader并将 txt 文件直接导入到您的应用程序中。

原始加载程序：https ://github.com/webpack-contrib/raw-loader

然后你可以简单地：import txt from 'file.txt';

无论哪种方式，您都需要从本地文件系统中提取数据并使用某种方法将其包含在包中。