react中如何引用json

react中引用json的方法:1、直接import引入,使用【create-react-app】来构建项目;2、把json文件改成js文件,把原本json中的数据赋值给变量data。

react中如何引用json

该方法适用于所有品牌电脑

react中引用json的方法:

第一种:直接import引入

需要使用json-loader模块,如果你是使用create-react-app来构建项目,那么该模块已经包含在内,

你只需要用import像引入组件那样引入json文件即可, import data from ‘../lessonlist/courselist.json’;

data是我自己取的名字,类似组件名,不用export default data来导出,不过在json文件中这样写也会报错

6072d4af4db5d88f8cfdeb4ed52153e.png

第二种:把json文件改成js文件

把json文件改成js文件,然后把原本json中的数据赋值给变量data,

在用import引入即可,import data from ‘../lessonlist/courselist.js’;

53449e8183bbb35d78e3cb88f18f64d.png

这2种方法访问数据如下

{data[0].name}{data[0].url}{data[1].name}{data[1].url}{data[2].name}{data[2].url}

登录后复制

这2种方法的主要区别

json文件不需要export default导出,也不支持该语法,会报错,

js文件需要把数据赋值给一个变量,在export default导出,

json文件中的属性和值都要用双引号,否则会报错,js文件属性可以不用加双引号

相关免费学习推荐:javascript(视频)

以上就是react中如何引用json的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2721815.html

(0)
上一篇 2025年3月7日 22:48:45
下一篇 2025年2月19日 14:08:35

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • react中怎么安装sass

    react中安装sass的方法:首先安装【sass-loader】和n【ode-sass】依赖;然后打开react的webpack配置,并进行相关修改即可。 该方法适用于所有品牌电脑 react中安装sass的方法:  一、安装sass-l…

    2025年3月7日
    200
  • react怎么循环列表

    react循环列表的方法:1、map循环,代码为【let MyDom =arr.map((item,index)=>】;2、for循环,代码为【for(var i=0;i 该方法适用于所有品牌电脑 react循环列表的方法: 1.ma…

    2025年3月7日
    200
  • weex和react native区别是什么

    weex和react native区别:1、设计角度上react native与很多oop语言类似,weex则更像web开发的html;2、weex能够编译出web端的代码,而react native不能。 该方法适用于所有品牌电脑 wee…

    2025年3月7日
    200
  • react中间件是什么?

    在react中,中间件就是一个函数,对store.dispatch方法进行了改造,在发出Action和执行Reducer这两步之间,添加了其他功能;常用的中间件都有现成的,只要引用别人写好的模块即可。 一、中间件的概念 为了理解中间件,让我…

    2025年3月7日
    200
  • react怎么添加背景图片

    react添加背景图片的方法:首先引入我们需要的图片路径,如【import Background from ‘../../../images/xxx.jpg’】;然后定义背景样式,如【width: “100%”】;最…

    2025年3月7日
    200
  • React中Material-UI是什么

    React中Material-UI是一款React组件库来实现Google的Material Design风格UI界面框架,也是首个React的UI工具集之一,使用它可以快速搭建出赏心悦目的应用界面。 Material-UI是一款React…

    2025年3月7日
    200
  • react中如何引入插件

    react中引入插件的方法:首先在js库开头添加【(function(answerSheet){)】;然后在js库的尾部添加【})($); module.exports = $;】即可。 本文环境:windows10、react16,Del…

    2025年3月7日
    200
  • react中如何引入css样式

    react中引入css样式的方法:首先在render函数中声明样式,如【render() {let mystyle = {}}】;然后引用样式即可,如【return();】。 本文环境:windows10、react16&&…

    2025年3月7日
    200
  • react中的portal是做什么的

    react中的portal可以将子组件渲染到非父组件的子树下,同时父组件仍能对子组件做出反应;使用方法如【ReactDOM.createPortal(this.props.children, this.el);】。 本文环境:windows…

    2025年3月7日
    200
  • react组件有哪些阶段

    react组件有Initialization、Mounting、Updating、Unmounting和Error Handing等五个阶段。其中Error Handing阶段属于错误处理阶段。 本文环境:windows10、react16…

    2025年3月7日
    200

发表回复

登录后才能评论