創建React-App公用文件夾JSON

找不到此確切答案。我想在我的/公共文件夾中有一個data.JSON文件，其中包含一個靜態文件，一旦建立了網站，我可以快速修改而無需重建網站。不過，我正在努力解決如何做出反應。我試過了README的指示，但有點不清楚。創建React-App公用文件夾JSON

如果我嘗試：

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/.

什麼是包括它的正確方法？我還試圖通過嘗試將其寫入window.DATA在public/index.html中，但因爲我認爲它必須調用Asynchronous（否則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); 
    } 
}

任何幫助將不勝感激！

來源

2017-09-08 reubenb87

你嘗試使用AB作爲錯誤消息建議的溶質路徑？ – Chris

喜歡從'./data.json進口數據嗎？如何將公共URL添加到該前綴？或者是其他東西？在自述中，似乎可以完成。 – reubenb87

我相信如果你的'data.json'文件在'src'目錄之外，你必須使用一個絕對路徑，或者把'data.json'文件放到你項目的'/ src /'目錄中想要使用相對路徑。 – Chris

您的第一個soluti如果您想將文件放在公共文件夾中，因爲React不應該訪問源文件夾之外的內容。否則，你可以想象一個不好的代碼可能允許人們訪問文件夾c：\ windows

你的第二個解決方案可能是要走的路，但只需要一點回調工作。如果你開始創建反應的應用程序內的項目，你可以把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" 
}

我試了一下剛纔，它可以顯示我的應用頁面中所有的時間

來源

2017-09-08 23:51:14 Vivian

你可以簡單地做這樣的：

mydata.js

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

在你的代碼

import myData from './mydata.js'

你現在有一個叫做可變數據myData

來源

2017-09-08 23:19:41 Mikkel

這不會根據OP的要求從'public'文件夾中導入 –

創建React-App公用文件夾JSON

回答

相關問題