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

2023-12-13 03:58:02

一、前言

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、组件封装

/**
 * @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方法将被调用。

三、最后

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

文章来源:https://blog.csdn.net/u012804440/article/details/134813133
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。