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

一、前言

react-json-view（RJV）是一个用于显示和编辑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、name：string或false

默认值：root

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

2.4.3、theme：string

默认值：rjv-default

RJV支持base-16主题

2.4.4、style：object

默认值：{}

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

2.4.5、iconStyle：string

默认值：triangle

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

2.4.6、indentWidth：integer

默认值：4

JSON嵌套对象的缩进值

2.4.7、collapsed：boolean

默认值：false

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

2.4.8、collapseStringsAfterLength：boolean

默认值：false

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

2.4.9、shouldCollapse：(field)=>{}

默认值：false

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

2.4.10、displayObjectSize：boolean

默认值：true

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

2.4.11、displayDataTypes：boolean

默认值：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方法将被调用。

三、最后

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