Create-React-App 公用文件夹 JSON

Question

找不到这个确切问题的答案。我想在我的 /public 文件夹中有一个 data.JSON 文件，其中包含一个静态文件，一旦构建了站点，我就可以快速修改而无需重新构建站点。但是，我正在努力解决如何对此做出反应。我已经尝试按照README 的说明进行操作，但有点不清楚。

如果我尝试：

    class Home extends Component {
      render() {
        const data = require(`${process.env.PUBLIC_URL}/data.json`);

我在编译时收到消息：

./src/Home.js
    Module not found: You attempted to import /data.json which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

包含它的正确方法是什么？我还尝试了一种 hacky 方法，尝试将其写入 public/index.html 中的 window.DATA 但因为我相信它必须调用异步（否则 chrome 会给我一个错误）有时数据会在那里，有时不会，而 React似乎不喜欢它。我试过的代码：

var request = new XMLHttpRequest();
request.open("GET", "%PUBLIC_URL%/data.json", true);
request.send(null);
request.onreadystatechange = function() {
  if ( request.readyState === 4 && request.status === 200 ) {
    window.DATA = JSON.parse(request.responseText);
  }
}

任何帮助将不胜感激！

Answer 1

借用“窗口”变量。

例如，在文件“/public/config.js”中：

window.samleAppConfig = {
  entryUrl: "service.com/api"
}

然后在文件“/src/App.js”中：

constructor(props) {
  super(props);
  console.log('entryUrl', window.samleAppConfig. entryUrl);
}

而在“/public/index.html”中：

<div id="root"></div>
<script type="text/javascript" src="config.js"></script>

Answer 2

如果您想将文件放在公共文件夹中，您的第一个解决方案将不起作用，因为 React 不应授予对源文件夹之外的内容的访问权限。否则你可以想象一个糟糕的代码可能允许人们访问文件夹 c:\windows

您的第二个解决方案可能是要走的路，但只需要在回调上做一些工作。如果你用 create-react-app 开始你的项目，你可以把 index.js 作为

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

var xhttp = new XMLHttpRequest();
var data = {};
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Typical action to be performed when the document is ready:
       data = JSON.parse(xhttp.responseText);
       ReactDOM.render(<App appData={JSON.stringify(data)}/>, document.getElementById('root'));
    }
};

xhttp.open("GET", `${process.env.PUBLIC_URL}/data.json`, true);
xhttp.send();

然后你的 App.js 为

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
          <h2>{JSON.parse(this.props.appData).Name}</h2>
      </div>
    );
  }
}

export default App;

我将 data.json 放在 public 文件夹中，我有这样的对象：

{
  "Name": "My App"
}

我刚刚试了一下，它可以一直在页面中显示我的应用程序

Answer 3

你可以这样做：

mydata.js

export default {
  myStuff: [ "one","two","three"]
}

在您的代码中

import myData from './mydata.js'

您现在将数据保存在一个名为 myData 的变量中