如何从本地文件中获取数据到我的 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 目录中。

原文由 bkula 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

原文由 Dan Hedgecock 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

由于您在评论中提到您在项目中使用了 create-react-app，目前最好的解决方案是一个名为 Raw.Macro 的 babel 插件。

此插件允许您访问文件的内容 而无需 create-react-app eject 。提供真正优雅的解决方案，无需任何样板代码。

注意：有一个小缺点，当文件更改时你必须重新启动你的 webpack 开发服务器，因为文件的内容是在构建过程中嵌入的。

     import raw from 'raw.macro';

    function foo(){
        const jsonContent = raw('../utils/stops.json');
        console.log(jsonContent);
    }

原文由 Marcel Šerý 发布，翻译遵循 CC BY-SA 4.0 许可协议