在React中导入JSON文件

我是React的新手，我试图从外部文件导入JSON DATA变量。我收到以下错误：在React中导入JSON文件

Cannot find module "./customData.json"

有人能帮助我吗？如果我在index.js中有DATA变量，但它不在外部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

在此先感谢！

来源

2016-09-25 Hugo Seleiro

尝试export default DATA或module.exports = DATA

来源

2016-09-25 11:02:36 Salvatore

不能正常工作:(!!谢谢 –

uhm你有没有试过用require而不是import？但是我确定这不是问题，路径是否正确？哦，并且试着写入import DATA而不是customData。 – Salvatore

Import DATA works !!非常感谢!!：D –

请存储您的JSON文件与扩展名为.js，并确保您的JSON应该在同一目录中。

来源

2016-09-25 12:15:34 Shubham

已解决!!谢谢你的回答!! –

一个很好的方法（不添加假的.js扩展名，代码不适用于数据和配置）是使用json-loader模块。如果你已经使用create-react-app脚手架项目，该模块已经包含了，你只需要导入您的JSON：

import Profile from './components/profile';

This答案详细解释。

来源

2017-08-13 15:38:12 Metallica

奇怪。当我尝试在'create-react-app'中导入一个json文件时，它返回'undefined ' – arvinsim

在React中导入JSON文件

回答

相关问题