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./在public / index.html中，但是因为我认为它必须调用异步（否则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

如果您想将文件放在公共文件夹中，那么您的第一个解决方案将无效，因为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放在公共文件夹中，我有这样的对象：

{
  "Name": "My App"
}

我刚刚尝试过，它可以随时在页面中显示我的应用

Answer 2

借用“窗口”变量。

例如，在文件“ /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 3

你可以这样做：

<强> mydata.js

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

在您的代码中

import myData from './mydata.js'

现在，您的数据位于名为myData

的变量中

Create-React-App公用文件夹JSON

3 个答案: