react-json-view（一看就会的教程）

最近业务上需要用到json可视化的需求，在这给大家安利一个前端页面很好用的插件react-json-view

• 第一步：安装插件npm install --save react-json-view 或者 yarn react-json-view，在这推荐大家在项目中用 yarn 安装插件，yarn的出错几率比npm低很多。
• 第二步：import ReactJson from 'react-json-view';引入，以组件的形式直接使用<ReactJson src={my_important_json} theme="monokai" />，组件主要接受两个参数，src是想要展示的json数据，还有个配置属性，以对象的形式写入，<ReactJson { ...this.state.jsonOptions } src={ this.state.payerData } />，
• 第三部：插件的所有配置参数
  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);
        }
      }
    }
  }

  componentDidMount() {
    this.getPayerData();
  }

  getPayerData = async () => {
    const res = await getPayer(1);
    if ( res.data.code === 0 ) {
      this.setState({
        payerData: res.data.data
      })
    }
  }

  render() {
    return (
      <div>
        payer
        <ReactJson { ...this.state.jsonOptions } src={ this.state.payerData } />
      </div>
    )
  }
}

export default Payer;