javascript - 如何从本地文件中获取数据到我的 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';

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