react native和android原生之前传递json参数 react json view

admin2024-05-30  14

最近业务上需要用到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;


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!