react-json-view实质上是被作者封装了多个属性的一个组件。通过名字可以分析此组件适合react开发中，用户可以通过此组件对json对象进行渲染。不同于JSON.parse()将json字符串转换成json对象（与其相反JSON.stringify()将json对象转换成字符串）只是做转换不渲染。react-json-view可以把结果直接渲染在页面上。
一、react-json-view的具体使用过程如下：
（1)模块安装
可以通过npm install --save react-json-view 或者 yarn react-json-view进行安装。
(2)引用
import ReactJson from ‘react-json-view‘；
(3)具体应用
<ReactJson src={需要转换渲染的内容} />
二、react-json-view具有的多个内置属性。
| 属性名 | 值类型 | 默认值 | 描述 |
|---|---|---|---|
| src(必备属性) | JSON Object | 无 | 需要进行渲染的JSON数据。 |
| name | string或false | root | JSON数据的根节点(用默认或指定的根节点包裹自己的数据),使用null或false没有名字。 |
| theme | string | rjv-default |
|
| style | object | {} | 可以通过style添加、修改样式,可覆盖主题默认提供的属性。 |
| iconStyle | string | triangle | 接受参数:circle(圆)、triangle(三角形)、square(圆)。 |
| indentWidth | integer(整数) | 4 | JSON嵌套对象的缩进值。 |
| collapsed | boolean或integer | false | 当设置为true，所有节点都将被折叠。 |
| collapseStringsAfterLength | integer | false | 这个就是超出内容会变成...的功能。当一个整数值被赋值时，字符串就会在这个长度后面接上省略号。可以通过单击字符串值来展开和折叠字符串内容 |
| shouldCollapse | (field)=>{} | false | 回调函数来提供对默认情况下应该折叠的对象和数组的控制。对象被传递给包含name, src, type(“数组”或“对象”)和namespace |
| displayObjectSize | boolean | true | 当设置为true，对象和数组被标记为大小。例如: { a: ‘a1‘,b: ‘b1‘ },会显示2 items |
| displayDataTypes | boolean | true | 当设置为true，数据类型会出现在数据的前缀值.例如: { a: 123, b: ‘b1‘},会显示{ a: int 123, b: string ‘b1‘} |
| onEdit | (edit)=>{} | false | 当传入回调函数时，edit功能已启用。在编辑完成之前调用回调。详见《rjv-onEdit》 |
| onAdd | (add)=>{} | false | 当传入回调函数时，add功能已启用。在完成添加之前调用回调。《rjv-onAdd》 |
| onDelete | (delete)=>{} | false } | 当传入回调函数时，delete功能已启用。在完成删除之前调用回调。《rjv-onDelete》 |
| onSelect | (select)=>{} | false | 当传入函数时，单击值将触发onSelect方法将被调用。 |
此表引自https://www.cnblogs.com/soyxiaobi/p/9713814.html 并做了改动。以便使用。在此感谢作者！！
三、在使用过程中如果所要展示的内容格式不对会发生报错。(以我自己的为例）
通过转换所输入到<ReactJson>中的文本类型进行修正。在此项目中需要考虑的数据类型是普通字符串、json字符串和空的情况。具体讨论如下：
当然具体的情况还要具体分析，通过修改不同的属性来展示所要渲染的内容。感谢大神们的相助，一篇来自前端新手的总结，如有错误请见谅！