在 React 中导入 JSON 文件 [英] Import JSON file in React

问题描述

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

<块引用>

找不到模块./customData.json"

有人可以帮我吗?如果我在 index.js 中有我的 DATA 变量，但它在外部 JSON 文件中时无效.

索引.js

import React, {Component} from 'react';从 'react-dom' 导入 ReactDOM；从 './customData.json' 导入 customData；从./components/profile"导入配置文件；从'./components/hobbies'导入爱好；类 App 扩展组件 {使成为() {返回 (<div><档案名称={this.props.profileData.name}imgUrl={this.props.profileData.imgURL}/><爱好爱好列表={this.props.profileData.hobbyList}/>

);}}ReactDOM.render(, document.querySelector('.container'));

爱好.js

import React, {Component} from 'react';var 爱好 = React.createClass({渲染:函数(){var hobbies = this.props.hobbyList.map(function(hobby, index){return (<li key={index}>{hobby}</li>);});返回 (<div><h5>我的爱好:</h5><ul>{爱好}

);}});导出默认爱好；

配置文件.js

从'react'导入React；var Profile = React.createClass({渲染:函数(){返回 (<div><h3>{this.props.name}</h3><img src={this.props.imgUrl}/>

)}});导出默认配置文件

自定义数据.json

var DATA = {姓名:'约翰史密斯'，imgURL: 'http://lorempixel.com/100/100/',爱好列表:['编码'，'写作'，'滑雪']}导出默认数据

解决方案

一种不错的方法(不添加用于代码而不是用于数据和配置的虚假 .js 扩展名)是使用 json-loader 模块.如果您使用 create-react-app 来搭建您的项目，则该模块已经包含在内，您只需要导入您的 json:

import Profile from './components/profile';

这个答案解释了更多.

I'm new to React and I'm trying to import a JSON DATA variable from an external file. I'm getting the following error:

Cannot find module "./customData.json"

Could some one help me? It works if I have my DATA variable in index.js but not when it's in an external JSON file.

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

解决方案

One nice way (without adding a fake .js extension which is for code not for data and configs) is to use json-loader module. If you have used create-react-app to scaffold your project, the module is already included, you just need to import your json:

import Profile from './components/profile';

This answer explains more.

这篇关于在 React 中导入 JSON 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！