当前位置: 首页 > 工具软件 > Square View > 使用案例 >

json react 展示工具_react-json-view(看这篇就够了)

阎丰羽
2023-12-01

最近业务上需要用到json可视化的需求,在这给大家安利一个前端页面很好用的插件react-json-view第一步:安装插件npm install --save react-json-view 或者 yarn react-json-view,在这推荐大家在项目中用 yarn 安装插件,yarn的出错几率比npm低很多。第二步:import ReactJson from 'react-json-view';引入,以组件的形式直接使用,组件主要接受两个参数,src是想要展示的json数据,还有个配置属性,以对象的形式写入,,第三部:插件的所有配置参数

1.src(必须):JSON Object

默认值:无

需要展示的JSON数据

2.name:string或false

默认值:root

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

3.theme:string

默认值:rjv-default

RJV支持base-16主题。更多主题参考

4.style:object

默认值:{}

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

5.iconStyle:string

默认值:triangle

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

6.indentWidth:integer(整数)

默认值:4

JSON嵌套对象的缩进值

7.collapsed:boolean或integer

默认值:false

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

8.collapseStringsAfterLength:integer

默认值:false

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

9.shouldCollapse:(field)=>{}

默认值:false

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

10.displayObjectSize:boolean

默认值:true

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

11.displayDataTypes:boolean

默认值:true

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

12.onEdit:(edit)=>{}

默认值:false

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

13.onAdd:(add)=>{}

默认值:false

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

14.onDelete:(delete)=>{}

默认值:false

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

15.onSelect:(select)=>{}

默认值:false

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

下面贴出完整实例:

import React from 'react';

import ReactJson from 'react-json-view';

import { getPayer } from '@/service/allApi';

class Payer extends React.Component{

constructor( props ) {

super( props );

this.state = {

payerData: {},

jsonOptions: {

displayDataTypes: false,

collapseStringsAfterLength: 20,

onEdit: ( edit ) => {

console.log('编辑' , edit);

},

onAdd: ( add ) => {

console.log('新增' , add);

}

}

}

}

componentDidMount() {

this.getPayerData();

}

getPayerData = async () => {

const res = await getPayer(1);

if ( res.data.code === 0 ) {

this.setState({

payerData: res.data.data

})

}

}

render() {

return (

payer

)

}

}

export default Payer;

 类似资料: