import引入json文件_在React中导入JSON文件

我是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 (

);

}

}

ReactDOM.render(, 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 (

{hobby});

});

return (

My hobbies:

{hobbies}

);

}

});

export default Hobbies;

profile.js

import React from 'react';

var Profile = React.createClass({

render: function(){

return (

{this.props.name}

)

}

});

export default Profile

customData.json

var DATA = {

name: 'John Smith',

imgURL: 'http://lorempixel.com/100/100/',

hobbyList: ['coding', 'writing', 'skiing']

}

export default DATA

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值