在 React 中导入 JSON 文件

我是 React 的新手，我试图从一个外部文件导入一个 JSON DATA变量。我得到了以下错误:

找不到模块“ ./customData.json”

有人能帮帮我吗？如果我的 DATA变量在 index.js中，但是在外部 JSON 文件中，它就不工作了。

Index.js 
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import customData from './customData.json';
import Profile from './components/profile';
import Hobbies from './components/hobbies';


class App extends Component {
render() {
return (
<div>
<Profile name={this.props.profileData.name}imgUrl={this.props.profileData.imgURL} />
<Hobbies hobbyList={this.props.profileData.hobbyList}/>
</div>
);
}
}


ReactDOM.render(<App profileData={DATA}/>, document.querySelector('.container'));
业余爱好 
import React, {Component} from 'react';


var Hobbies = React.createClass({
render: function(){
var hobbies = this.props.hobbyList.map(function(hobby, index){
return (<li key={index}>{hobby}</li>);
});
return (
<div>
<h5>My hobbies:</h5>
<ul>
{hobbies}
</ul>
</div>
);
}
});


export default Hobbies;
配置文件 js 
import React from 'react';


var Profile = React.createClass({
render: function(){
return (
<div>
<h3>{this.props.name}</h3>
<img src={this.props.imgUrl} />
</div>
)
}
});


export default Profile
CustomData.json 
var DATA = {
name: 'John Smith',
imgURL: 'http://lorempixel.com/100/100/',
hobbyList: ['coding', 'writing', 'skiing']
}


export default DATA
308989 次浏览
小开

尝试使用 export default DATA或 module.exports = DATA

小开

请将您的 JSON 文件存储为.js 扩展名，并确保您的 JSON 应该位于相同的目录中。

小开
最佳答案

一个不错的方法(没有添加一个假的。Js 扩展，用于代码而不是数据和配置)是使用 json-loader模块。如果您已经使用 create-react-app为您的项目搭建了脚手架，那么模块已经包含在内，您只需要导入您的 json:

import Profile from './components/profile';

这个回答解释了更多。

小开

安装了 json-loader之后，您可以使用

import customData from '../customData.json';

或者，甚至更简单

import customData from '../customData';

安装 json-loader

npm install --save-dev json-loader
小开

这个老家伙..。

简而言之，您应该使用 request，并让节点将解析作为 request 调用的一部分来处理，而不是将其外包给第三方模块。您还应该注意您的配置是防弹的，这意味着您应该仔细检查返回的数据。

但为了简洁起见，考虑下面的例子:

例如，假设我在应用程序的根目录中有一个配置文件‘ admins.json’，其中包含以下内容:

管理员 Json 
[{
"userName": "tech1337",
"passSalted": "xxxxxxxxxxxx"
}]

注意引号键，"userName"，"passSalted"！

我可以做到以下几点，并轻松地从文件中获取数据。

let admins = require('~/app/admins.json');
console.log(admins[0].userName);

现在数据已经存在，可以用作常规(或数组)对象。

小开

//将. json 文件重命名为. js 并保存在 src 文件夹中

将 json 对象声明为变量

var customData = {
"key":"value"
};

使用 module.Export 导出它

module.exports = customData;

从需要它的组件，确保退出两个文件夹深

import customData from '../customData';

小开

对我有效的解决办法是:- 我将 data.json 文件从 src 移动到 public 目录。 然后使用获取 API 来获取文件

fetch('./data.json').then(response => {
console.log(response);
return response.json();
}).then(data => {
// Work with JSON data here
console.log(data);
}).catch(err => {
// Do something for an error here
console.log("Error Reading data " + err);
});

问题是，在编译了 response 应用程序之后，提取请求将查找 URL“ http://localhost:3000/data.json”处的文件，该文件实际上是我的 response 应用程序的公共目录。但不幸的是，在编译 response app data.json 文件时，它没有从 src 移动到 public 目录。因此，我们必须显式地将 data.json 文件从 src 移动到 public 目录。

小开

这在 React 16.11.0中运行良好

// in customData.js
export const customData = {
//json data here
name: 'John Smith',
imgURL: 'http://lorempixel.com/100/100/',
hobbyList: ['coding', 'writing', 'skiing']
}

// in index.js
import { customData } from './customData';


// example usage later in index.js
<p>{customData.name}</p>
小开

最简单的方法如下

// Save this as someJson.js
const someJson = {
name: 'Name',
age: 20
}


export default someJson

那么

import someJson from './someJson'
小开

有多种方法可以做到这一点，而不使用任何第三方代码或库(推荐的方法)。

第一种静态方式: 创建一个. json 文件，然后在您的反应组件示例中导入它

我的文件名是“ example.json”

{"example" : "my text"}

Json 中的示例键可以是任何值，只要记住使用双引号以防止将来出现问题。

如何导入反应元件

import myJson from "jsonlocation";

你可以在任何像这样的地方使用它

myJson.example

现在有几件事要考虑。使用这种方法，您必须在页面顶部声明您的导入，并且不能动态导入任何内容。

现在，如果我们想要动态地导入 JSON 数据，那么一个多语言支持的网站会怎么样呢？

2动态方式

首先声明您的 JSON 文件，就像我上面的例子一样

但这次我们导入数据的方式不同了。

let language = require('./en.json');

这个也可以用同样的方式进入。

但是等等，动态负载在哪里？

下面是如何动态加载 JSON

let language = require(`./${variable}.json`);

现在确保所有的 JSON 文件都在同一个目录中

在这里，您可以像使用第一个示例一样使用 JSON

myJson.example

是什么改变了我们进口的方式，因为这是我们唯一真正需要的东西。

希望这个能帮上忙。

小开 
var langs={
ar_AR:require('./locale/ar_AR.json'),
cs_CZ:require('./locale/cs_CZ.json'),
de_DE:require('./locale/de_DE.json'),
el_GR:require('./locale/el_GR.json'),
en_GB:require('./locale/en_GB.json'),
es_ES:require('./locale/es_ES.json'),
fr_FR:require('./locale/fr_FR.json'),
hu_HU:require('./locale/hu_HU.json')
}
module.exports=langs;

在你的模块中要求:

let langs=require('./languages');

问候

小开

对我有效的方法是简单地将 JSON 文件放在公用文件夹中。您可以简单地导入任何 js，使用

brain.loadData("exampleFile.json");

我想就是这么简单。绝对值得一试

小开

React 17从 create-react-app创建，默认情况下只导入 json 工作。

import config from './config.json'
小开

在当前的反应构建中，你只需要导入和使用:

import jsonData from 'path/to/myJson.json'

提交答案