React中使用react-json-view展示JSON数据

文章目录

一、前言

react-json-viewRJV)是一个用于显示和编辑javascript数组和JSON对象的React组件。

1.1、在线demo

1.2、Github仓库

二、实践

2.1、安装react-json-view

安装插件,在这推荐大家在项目中用 yarn 安装插件,yarn的出错几率比npm低很多。

复制代码
npm install --save react-json-view
// 或者
yarn react-json-view

2.2、组件封装

react 复制代码
/**
 * @Description: 格式化显示json数据 react-json-view
 * @github https://github.com/mac-s-g/react-json-view
 * @demo https://mac-s-g.github.io/react-json-view/demo/dist/
 * @author 小马甲丫
 * @date 2023-12-06 01:26:47
 */
import ReactJsonView from 'react-json-view';

const ReactJson = (props) => {
  return (
    <ReactJsonView
      name={false} // 根节点名字
      collapsed={false} // 是否收起,true为收起
      indentWidth={4} // 缩进
      iconStyle="triangle"
      src={props.value}
      theme="grayscale:inverted"
      enableClipboard // 点击向左箭头进行复制
      displayObjectSize={false} // 显示有多少个items属性
      displayDataTypes={false} // 显示值的类型
      sortKeys // 键的排序
      quotesOnKeys={false} // 是否显示a键的引号
    />
  );
};

export default ReactJson;

2.3、效果

传入的数据是数组,如下所示:

2.4、参数详解

2.4.1、src(必须) :JSON Object

默认值:无

需要展示的JSON数据

2.4.2、namestringfalse

默认值:root

JSON数据的根节点(用默认或指定的根节点包裹自己的数据),使用nullfalse没有名字

2.4.3、themestring

默认值:rjv-default

RJV支持base-16主题

2.4.4、styleobject

默认值:{}

可以通过style添加、修改样式,可覆盖主题默认提供的属性

2.4.5、iconStylestring

默认值:triangle

接受参数:circle(圆)、triangle(三角形)、square(圆)

2.4.6、indentWidthinteger

默认值:4

JSON嵌套对象的缩进值

2.4.7、collapsedboolean

默认值:false

当设置为true,默认情况下,所有节点都将被折叠。使用整数值在特定深度折叠。

2.4.8、collapseStringsAfterLengthboolean

默认值:false

这个就是超出内容会变成...的功能。当一个整数值被赋值时,字符串就会在这个长度后面接上省略号。可以通过单击字符串值来展开和折叠字符串内容

2.4.9、shouldCollapse:(field)=>{}

默认值:false

回调函数来提供对默认情况下应该折叠的对象和数组的控制。对象被传递给包含name, src, type("数组"或"对象")和namespace

2.4.10、displayObjectSizeboolean

默认值:true

当设置为true,对象和数组被标记为大小。例如: { a: 'a1',b: 'b1' },会显示2 items

2.4.11、displayDataTypesboolean

默认值:true

当设置为true,数据类型会出现在数据的前缀值.例如: { a: 123, b: 'b1'},会显示{ a: int 123, b: string 'b1'}

2.4.12、onEdit(edit)=>{}

默认值:false

当传入回调函数时,edit功能已启用。在编辑完成之后调用回调。

2.4.13、onAdd(add)=>{}

默认值:false

当传入回调函数时,add功能已启用。在完成添加之后调用回调。

2.4.14、onDelete(delete)=>{}

默认值:false

当传入回调函数时,delete功能已启用。在完成删除之后调用回调。

2.4.15、onSelect(select)=>{}

默认值:false

当传入函数时,单击值将触发onSelect方法将被调用。

三、最后

本人每篇文章都是一字一句码出来,希望大佬们多提提意见。顺手来个三连击,点赞👍收藏💖关注✨。创作不易,给我打打气,加加油☕

相关推荐
腾讯TNTWeb前端团队2 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰5 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪5 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪6 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy6 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom7 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom7 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom7 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom7 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom7 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试