在React中导入JSON文件

Question

我是React的新手,我正在尝试DATA从外部文件导入JSON 变量.我收到以下错误:

找不到模块"./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'));

hobbies.js

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;

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

Answer 1

一个不错的方法(不添加假的.js扩展名,用于代码而不是数据和配置)是使用json-loader模块.如果您曾经使用create-react-app过脚手架项目,那么模块已经包含在内,您只需要导入json:

import Profile from './components/profile';

这个答案解释得更多.

Answer 2

这老栗子......

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

但为了简洁起见,请考虑以下示例:

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

[{
  // Note the quoted keys, "userName", "passSalted"!
  "userName":"tech1337",
  "passSalted":"xxxxxxxxxxxx"
}]

我可以执行以下操作,轻松地从文件中获取数据.

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

现在数据已经存在并且可以用作常规(或数组)对象.

Answer 3

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

import config from './config.json'

Answer 4

最简单的方法如下

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

export default someJson

然后

import someJson from './someJson'

Answer 5

在当前的反应构建中，您只需导入并使用：

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

Answer 6

请使用.js扩展名存储您的JSON文件,并确保您的JSON应位于同一目录中.

Answer 7

对我有用的解决方案是：-我将 data.json 文件从 src 移动到公共目录。然后使用 fetch 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);
    });

问题是，在编译 react 应用程序后，获取请求会在 URL“ http://localhost:3000/data.json ”中查找文件，这实际上是我的 react 应用程序的公共目录。但不幸的是，在编译 react app 时 data.json 文件没有从 src 移动到 public 目录。所以我们必须明确地将 data.json 文件从 src 移动到 public 目录。

Answer 8

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

Answer 9

有多种方法可以在不使用任何第三方代码或库的情况下执行此操作（推荐方法）。

第一种静态方式：创建一个 .json 文件，然后将其导入到您的 React 组件示例中

我的文件名是“example.json”

{"example" : "my text"}

example.json 中的示例键可以是任何内容，请记住使用双引号来防止将来出现问题。

如何在react组件中导入

import myJson from "jsonlocation";

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

myJson.example

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

现在，如果我们想动态导入 JSON 数据怎么办？例如多语言支持网站？

2 动态方式

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

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

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

这可以用同样的方式访问。

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

这是动态加载 JSON 的方法

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

现在确保所有 JSON 文件都位于同一目录中

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

myJson.example

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

我希望这有帮助。

Answer 10

随着json-loader安装,您可以使用

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

或者,甚至更简单

import customData from '../customData';

安装 json-loader

npm install --save-dev json-loader

Answer 11

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

将json对象声明为变量

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

使用 module.exports 导出

module.exports = customData;

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

import customData from '../customData';