开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

react-json-view是什么

react-json-view：官方对它的解释为，是一个React组件，可用可视化的显示、编辑JS数组或者JSON对象。所以react-json-view本质上是一个组件，使用方法也与React组件的使用方式无差。

安装方式

npm install --save react-json-view 或 yarn add react-json-view

基本用法

首先引入react-json-view，然后传入必传的src字段即可，src属性表示需要展示的JSON数据，是一个JSON对象类型，如下示例：

// 1.引入RVJ
import ReactJson from 'react-json-view';

export default function Demo1() {
  // 2.定义JSON Object类型的对象
  const jsonObj = {
    name: 'lucy',
    sex: 'female',
    age: 18,
  };
  return (
    <div style={{ padding: 20 }}>
      {/* 3.使用ReactJson组件并传入jsonObj */}
      <ReactJson src={jsonObj}></ReactJson>
    </div>
  );
}

效果如下所示：

当鼠标滑过每一行时，会出现可以复制的提示，就能够快速复制对应的内容：

如果想要更改数据展示的主题，可以通过theme属性进行更改，RJV现在能够支持base-16主题，比如：

// 主题
const themeArr = [
  'apathy',
  'apathy:inverted',
  'ashes',
  'bespin',
  'brewer',
  'bright:inverted',
  'bright',
  'chalk',
  'codeschool',
  'colors',
  'eighties',
  'embers',
  'flat',
  'google',
  'grayscale',
  'grayscale:inverted',
  'greenscreen',
  'harmonic',
  'hopscotch',
  'isotope',
  'marrakesh',
];

...

   {themeArr.map((item: any) => (
     <div style={{margin: '10px 0'}}>
       <ReactJson src={jsonObj} theme={item}></ReactJson>
     </div>
   ))}

虽然可以通过theme属性快速更改主题样式，但是如果想要定制样式，也可以通过style属性进行自定义。 react-json-view简称RJV，它更多的属性信息可通过GitHub官方链接查看，如下表格为RJV的常用props，可以按照表格或上述链接进行学习。

属性	类型	默认值	描述
src	JSON Object	None	输入的JSON对象
name	string 或 false	root	4
theme	string	rjv-default	base-16主题样式
style	object	{}	自定义样式
iconStyle	string	triangle	展开符号样式，circle(圆)、triangle(三角形)、square(方形)
collapsed	boolean或integer	false	是否折叠或折叠深度
RJV还有几个方法属性，分别为：

• onEdit
• onAdd
• onDelete
• onSelect 上述四个属性都可用于当用户进行对应操作后处理的回调函数。如下所示，JSON数据展示分别可以进行不同的操作：

当点击加号符号、编辑符号、删除符号、左向箭头符号可以进行添加、编辑、删除该属性和选中复制操作。效果如下面几个图所示：

当点击加号时，出现添加弹窗，可以添加一个新的属性
当点击编辑符号时，可以修改属性名

总结

react-json-view能够帮助可视化的展示数据，特别是JSON格式的数据，给人以清晰、直观的方式显示数据的结构和内容，并且提供各种操作函数，便于直接对数据进行编辑操作，为更好的了解数据的结构提供了极大的帮助。我也是在工作中，发现调用链信息、日志信息等都可以利用react-json-view来更好的展示这些数据，从而认识了RJV。