在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文件

回答

相關問題