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

三、最后

到此这篇关于React中使用react-json-view展示JSON数据的文章就介绍到这了,更多相关react-json-view展示JSON数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！