React导入json数据

2023-11-06

本文提供两种方式,读者根据自己的需要进行选择。

1.第一种方式:直接import json文件。

这种方式依赖于 json-loader模块(npm install json-loader, https://www.npmjs.com/package/json-loader),如果工程是使用create-react-app构建的,那么该模块已经包含在内。

 import jsondata from './hierachy.json';

console.log(data);

2.第二种方式:将json文件改为js文件

将json文件中的内容放到js文件中(myjsondata.js).

因为只是export一个对象,所以使用" export default jsondata; "

myjsondata.js

let jsondata ={
	"name":"John",
	"age": 1,
	"school": "yizhong",
	"class": "4",
}

export default jsondata;

在其它文件中导入json数据:

import jsondata from './myjsondata';

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React导入json数据 的相关文章

  • 在 ReactJS 中创建动态目录

    我有一个组件 它代表一个页面 其中有多个SectionHeader 组件作为该页面的子组件 我想通过检查 Page 的子项 SectionHeaders 来动态创建目录
  • 陷入了 React useEffect 的一系列变化

    我正在反应中创建一个表单生成器 在一个简单的文本字段上 我需要 Change currentValue When currentValue已更改 验证它 验证完成后 发出一个事件 有效或无效 这是我的代码 const TextInput p
  • redux 和 React 中减速器的先前状态

    这是我的减速器的样子 export default function catalogReducer state initialState catalogItems action switch action type case types L
  • IE 中未定义“代理”

    我通过 React Node 构建了一个 Excel 插件Umi https umijs org 我们已经实施了我们的身份验证系统 身份验证在 Chrome 和 Safari 中有效 我刚刚意识到它在 IE11 中不能很好地工作 F12表明
  • React Typescript - 在路由中传递时如何将类型添加到 location.state

    当我将react router props发送到路由中的组件时 我收到错误 因为我有特定的状态 我传递了该组件 但错误显示在我的路由中 这是路线代码
  • jest.mock() 在测试内部不起作用,仅在测试外部起作用

    我有一套简单的测试 在某些情况下我想模拟一个模块 而在某些情况下则不想 然而 jest mock 仅当将其置于测试之外时才有效 任何人都知道为什么会这样以及我做错了什么 这是我想要模拟的函数的实际导入 import hasSupport g
  • SWC with JavaScript:如何处理 CSS 导入以及如何绝对导入?

    TL DR 如何告诉 SWC 编译 React 组件中导入的 CSS 文件 如何告诉 SWC 在测试和 React 组件中编译绝对导入 这是一个最小的可重现示例 https github com janhesters riteway swc
  • Typescript 和 React 使用空类型数组设置初始状态

    假设我有以下片段 interface State alarms Alarm export default class Alarms extends React Component lt State gt state alarms 因为我想设
  • 嵌套对象的 setState

    我有一个嵌套对象作为状态 并且在组件中有一个表单 我正在考虑每次用户在表单中输入某些内容时更新状态 并且为了避免为每个输入创建许多函数 我正在考虑使用 switch 创建单个函数 使用 switch 创建单一函数是个好主意吗 如何更新对象的
  • React 文件预览 (FIREBASE)

    我目前将文件存储在 Firebase 存储中 我希望能够实时生成每个文件的文件预览 映射 例如 PDF 文件会将第一页显示为图像 docx 将是文档的第一页 pptx 将是第一张幻灯片 未知文档将是默认文档符号 有人知道有什么好的服务可以轻
  • React Material UI CardMedia 视频组件未播放

    我看到缩略图 但无法启动或停止视频 还有什么方法可以让它自动播放和重复吗 https material ui com api card media https material ui com api card media
  • 在玩笑中运行普通转换后如何转换模块

    用笑话测试 React 组件 其中一些组件使用 OpenLayers ol 软件包 v5 2 0 在 ol 包 v4 中 我应用了 transformIgnorePatterns 来转换 ol 包 jest transformIgnoreP
  • React:隐藏特定路由上的组件

    新的反应 我有一个
  • 如何使用tampermonkey模拟react应用程序中的点击?

    我正在尝试使用 Tampermonkey 脚本模拟对 React 元素的点击 不幸的是 由于 React 有自己的影子 DOM 所以天真的方法使用document querySelector 不工作 我遇到了一些需要修改 React 组件本
  • 如何测试无状态组件

    我正在尝试测试下面的组件 但出现错误 它是一个带有一些数据的功能组件 下面的组件从父组件接收信息列表并渲染 它工作完美 但是在编写测 试用例时 它使用笑话和酶失败 import React from react export const I
  • Storybook w/react-router - 你不应该在 之外使用

    尽管有 Sensei 谷歌搜索技能 但我很难找到问题的解决方案 尽管我的应用程序与react router工作没有任何问题Storybook抛出错误 不变失败 你不应该在之外使用 Error Invariant failed You sho
  • 使用映射更新没有对象的数组

    如果我有一个像这样的对象数组 name james name john 我知道 john 的索引并且想要更改 john 的值我会做 person person map p i gt i index p name changed john p
  • 将钩子传递给子打字稿的问题

    我有一个使用钩子的反应组件 我的父组件如下所示 const Parent gt const isActive setIsActive useState false return
  • Telegram 授权无默认按钮

    使用 Telegram 第 3 方授权的唯一有记录的方法是使用其提供的脚本https core telegram org widgets login https core telegram org widgets login 这个脚本 正如
  • 从 Firebase 实时数据库 + 存储加载图像

    我正在使用 Firebase 文档 react redux firebase 中的 create react app 创建类似汽车图片库的东西 图像信息存储在 Firebase 实时数据库中 但实际图像文件存储在 Firebase 存储中

随机推荐

  • AlertDialog 修改文本内容的颜色

    最近遇到一个问题在联想A858T白色手机上测试如下AlertDialog时 AlertDialog背景默认为白色 title message为黑色 但是CheckBox的Text却为白色 final CheckBox cb new Chec
  • 1.VS软件错误代码C3848

    VS软件错误代码C3848 VS2022不知道怎么解决这个错误 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 C3848 具有类型 const Keycmp 的表达式会丢失一些 const volatile 限定符以调用 bool
  • 10000条数据怎么插入比较快

    具体方案 要快速插入10000条数据 以下是一些可行的方法 开启事务 JDBC直接处理 开启事务和关闭事务 耗时差距5倍左右 并且这个倍数会随着数据量的增大而增大 因为在未开启事务时 更新10000条数据 就得访问数据库10000次 导致每
  • FPGA跨时钟域信号处理之亚稳态问题

    FPGA跨时钟域信号处理之亚稳态问题学习笔记 将慢速时钟域 PC 机中的波特率 系统中的 rx 信号同步到快速时钟域 FPGA 中的 sys clk 系统中 所使用的方法叫电平同 步 俗称 打两拍法 跨时钟域会导致 亚稳态 metastab
  • Sonar Java默认的扫描规则

    规则如下 equals should not be used to test the values of Atomic classes equals 方法不应该用在原子类型的数据上 如 AtomicInteger AtomicLong At
  • 宏观内存信息统计

    proc meminfo统计信息解释 linux下内存的统计信息的解释 例如 cat proc meminfo MemTotal 1031016 kB MemFree 13548 kB MemShared 0 kB Buffers 9806
  • 微信小程序(5)-新闻页面制作(1)

    制作如图所示新闻页面 newspage 之导航栏步骤如下 1 在newspage js中定义数据 数据都放在 js中的data内 data newsTitles 要闻 国际 国内 娱乐 体育 科技 视频 2 在newspage wxml中定
  • java.text.ParseException分析

    1 错误 java text ParseException Unparseable date 2018 1 22 14 55 21 2 java text ParseException Unparseable date 2018 1 22
  • C语言操作符详细介绍

    目录 前言 一 原码 反码 补码的基础概念 1 原码 2 反码 3 补码 二 原码 反码 补码的计算方法 1 原码 2 反码 3 补码 三 算术操作符 四 移位操作符 1 左移操作符 移位规则 2 右移操作符 移位规则 1 逻辑移位 2 算
  • 服务器pci光卡 系统不显示,工控机系统读取不到PCI卡的原因及解决办法

    有一次 东田一个客户谈到了以前的工控机出现了系统读取不到PCI卡的问题 其实这样的问题并不常见 但既然存在这样的问题 我们就一起来看看吧 故障的分析和处理 1 先看看在系统设备管理器中有无这个PCI设备的存在 若有 则看驱动和中断是否正常
  • 骚年~来一起撸一撸,这些面试必问的知识

    长按上方小姐姐
  • openGL之API学习(一九六)纹理单元名(纹理对象)和纹理单元的关系

    glGenTextures产生的是一个比较小的整数id 纹理单元名 glActiveTexture激活的是纹理单元号 GL TEXTUREi 它们二者的关系为GL TEXTUREi GL TEXTURE0 id glBindTexture使
  • 【机器学习实战】10、利用PCA来简化数据

    文章目录 13 1 降维技术 13 1 1 主成分分析 PrincipalComponentAnalysis PCA 13 1 2 因子分析 Factor Analysis 13 1 3 独立成分分析 Independent Compone
  • QT如何生成Release版本(得到exe运行DLL)

    1 点击左侧工具栏的 项目 在 构建设置 中 将 编辑构建设置 更改为 Release 特别要注意 概要 中的 Show build 选择框 将勾选去掉 此处主要是选择将生成的文件放置在何处 2 已经生成exe之后 将exe文件单独放置在一
  • 测试开发工程师需要具备的性格

    1 细心 2 耐心 3 时间观念 4 表达能力 5 好奇心 多问几个为什么
  • 【华为OD机试】组成最大数(C++ Python Java)2023 B卷

    题目描述 小组中每位都有一张卡片 卡片上是6位内的正整数 将卡片连起来可以组成多种数字 计算组成的最大数字 输入描述 号分割的多个正整数字符串 不需要考虑非数字异常情况 小组最多25个人 输出描述 最大的数字字符串 用例1 输入 22 22
  • 在虚拟机上安装Ubuntu系统

    打开VMware 点击文件新建虚拟机 选择典型 下一步选择安装系统iso映像文件 安装位置我选择的E盘 保持默认 下一步 点击完成 运行系统后 上下左右键操作 选择中文 简体 回车 选择安装Ubuntu服务器版 语言选择中文 简体 选是 中
  • 字符集详解(一看就懂系列)

    原文请参考 https blog csdn net qq 28098067 article details 53486032 一 编码历史与区别 一直对字符的各种编码方式懵懵懂懂 什么ANSI UNICODE UTF 8 GB2312 GB
  • Qt图形视图框架:QGraphicsScene详解

    一 描述 1 场景提供了一个用于管理大量2D图形项的平面 该类充当图形项的容器 它与视图一起用于可视化2D曲面上的图形图形项 2 场景没有自己的视觉外观 只负责管理图形项 3 场景的最大优势之一就是其快速有效地定位图形项的能力 即使场景中有
  • React导入json数据

    本文提供两种方式 读者根据自己的需要进行选择 1 第一种方式 直接import json文件 这种方式依赖于 json loader模块 npm install json loader https www npmjs com package