【React】react-json-view用法

react-json-view:

前端json可视化插件

安装：

npm install --save react-json-view 

使用：

import ReactJson from 'react-json-view'

<ReactJson/>

配置：

<ReactJson
      collapsed={false}//是否收起,true为收起
      indentWidth={10}//缩进
      iconStyle='circle'//选择折叠的图标形状 circle(圆)、triangle(三角形)、square(圆)
      src={my_important_json}//json数据
      theme='bright'//主题
      collapseStringsAfterLength={10}//字符串多长时用省略号
      enableClipboard={true}//点击向左箭头进行复制
      displayObjectSize={false}//显示有多少个items属性
      displayDataTypes={false}//显示值的类型
      onEdit={(edit)=>{console.log(edit)}}//编辑完成前调用回调函数
      onAdd={(add)=>{console.log(add)}}//添加属性
      defaultValue='malinshu'//添加属性后的默认值
      onDelete={(onDelete)=>{console.log(onDelete)}}//删除属性
      onSelect={(onSelect)=>{console.log(onSelect)}}//单击键值对的值时触发
      sortKeys={true}//键的排序
      quotesOnKeys={false}//是否显示键的引号
      groupArraysAfterLength={5}//数组为多少个的时候被拆分显示
      style={{backgroundColor:'green'}} //样式
/>