ReactでJSONファイルをインポートする

Question

私はReactを新しくしました。JSON DATA変数を外部ファイルからインポートしようとしています。次のエラーが表示されます：

Cannot find module "./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ファイルを保存して、JSONが同じディレクトリにあるべきであることを確認してくださいexport default DATAまたはmodule.exports = DATA

Answer 2

てみてください。

Answer 3

良い方法は、json-loaderモジュールを使用することです（データと設定ではないコード用の偽の.js拡張子を追加しないでください）。あなたのプロジェクトを骨格にcreate-react-appを使用している場合は、モジュールがすでに含まれている、あなたは自分のJSONをインポートする必要があります。

import Profile from './components/profile'; 

This答えは、より多くを説明しています。