使用 react-json-view 展示和修改数组对象 RJV 是一个 React 组件，用来展示和编辑 js 数组或

RJV 是一个 React 组件，用来展示和编辑 js 数组或者 json 对象。

使用也很简单

安装

npm install --save react-json-view

使用

数据

const obj = {
    id: 'b12ec7123',
    name: 'test-json-view',
    type: 'string',
    status: 'disabled',
    children: [
      {
        id: 'uu12788329',
        name: 'child-1-1',
        type: 'string',
        status: 'disabled',
      },
      {
        id: '8ba9a36273a',
        name: 'child-1-2',
        type: 'number',
        status: 'enabled',
      },
   ],
};
  
const arr = [
    {
      id: 'a728e23',
      name: 'test-display',
    },
    {
      id: '098b3a832',
      name: '这是一段随机文字',
    },
    {
      id: '903b6723a23',
      name: 'react-json-view使用指南',
    },
];

使用

import React  from 'react';
import ReactJsonView from 'react-json-view';

export default function ReactJsonViewDemo() {
  return (
    <div className="view-container">
      <ReactJsonView src={obj} />

      <div style={{ border: '1px dashed #ccc', margin: '10px 0' }}></div>

      <ReactJsonView src={arr} />
    </div>
  );
}

效果如图

属性和事件

RJV 提供了很多属性和事件，用来控制样式和添加、修改、删除等操作。

属性名	类型	默认值	说明
src	JSON Object	None	要展示的 json 对象
name	string 或 false	'root'	根节点的名称，设置为 null 或者 false，不展示名称
theme	string	"rjv-default"	RJV支持16进制主题
style	objce	{}	react-json-view 容器的样式属性。显式样式属性将覆盖主题提供的属性。
iconStyle	string	"circle"	展开/折叠图标的样式。可接受的值是 "circle", "triangle" or "square"
indentWidth	integer	4	设置嵌套对象的缩进宽度
collapsed	boolean or integer	false	当设置为 true 时，默认情况下所有节点都将折叠。使用整数值在特定深度折叠。
collapseStringsAfterLength	integer	false	当分配整数值时，字符串将按该长度截断。折叠的字符串后面是省略号。单击字符串值可以展开和折叠字符串内容。
shouldCollapse	( field ) => {}	false	用于控制默认情况下应折叠哪些对象和数组。一个对象被传递给回调函数，包含name、src、type（“array”或“object”）和命名空间
groupArraysAfterLength	integer	100	当分配整数值时，数组将按值的计数分组显示。组以括号符号显示，可以通过单击括号展开和折叠
enableClipboard	boolean or (copy)=>{}	true	当值不为false时，用户可以通过单击剪贴板图标将对象和数组复制到剪贴板。支持复制回调。
displayObjectSize	boolean	true	当设置为true时，对象和数组将用大小标记
displayDataTypes	boolean	true	设置为 true 时，值前面会展示数据的类型
onEdit	(edit) => {}	false	传入回调函数则开启编辑功能，在编辑完成之前会调用回调函数，回调函数返回 false，可以阻止编辑
onAdd	(add) => {}	false	传入回调函数时，将启用添加功能。在添加完成之前调用回调。从onAdd返回false将阻止进行更改
defaultValue	string、number、boolean、array、object	null	设置向 json 添加项目时使用的默认值
onDelete	(delete)=>{}	false	传入回调函数时，将启用删除功能。在删除完成之前调用回调。从onDelete返回false将阻止进行更改
onSelect	(select)=>{}	false	当传入一个函数时，单击一个值会触发onSelect方法被调用
sortKeys	boolean	false	设置为true以对象键进行排序
quotesOnKeys	boolean	true	设置为false以删除键中的引号
validationMessage	string	"Validation Error"	用于onEdit、onAdd或onDelete回调验证失败的自定义消息
displayArrayKey	boolean	true	当设置为true时，元素的索引前缀值

关于部分属性设置前后的对比效果可以查看官方提供的 demo