ローカルファイルから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; 

EDIT： 問題のファイルは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';

あなたのローカルファイルシステムからデータを取得する必要があり、いくつかの方法を使用して、バンドルに含めるいずれかの方法。

Answer 2

は、それは私があなたが探しているものだと思うローカルCSVファイルを読み、解析する能力を持っていPapaParse

http://papaparse.com/docs#local-files

を見てください。

jsonfileもありますが、フードの下でfsを使用することがあります。

<input type=file></input> 

を、ユーザーが手動でアプリにファイルを与える持っている：https://github.com/jprichardson/node-jsonfile

Answer 3

あなたは使用することができます。