1、react-json-view 的使用

        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	<ReactJson />可以用组件指定的主题,也可以用base-16定制(作者的另一个开源项目:《base16》)。可以点进链接查看并理解所需要的属性和主题。
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字符串和空的情况。具体讨论如下：

{

            title: 'Params',

            dataIndex: 'Params',

            key: 'Params',

            ellipsis: true,

            render: (text, rowinfo) => {

                const { Params } = rowinfo;

                if (typeof Params === 'string') {

                    try {

                        const Params1 = JSON.parse(Params)

                        return <ReactJson src={Params1} collapsed={true} theme='grayscale:inverted' style={{ textAlign: 'left' }} displayDataTypes={false} />

                    } catch (e) {

                        const dd = Params.split("=");//拆分=号

                        const key1 = dd[0];//=号前面的值

                        const value1 = dd[1];//=号后面的值

                        const Params2 = {}

                      Params2[key1] = value1

                        return <ReactJson src={Params2} collapsed={true} theme='grayscale:inverted' style={{ textAlign: 'left' }} displayDataTypes={false} />

                    }

                } else if (Params === 'NULL') { return <div>{Params}</div> }

            }

以上代码分析了三种情况：1、json字符串转换成json对象进行渲染

                                           2、原数据为空的情况改如何处理

                                           3、原数据是以=分割的一个字符串，通过转换变成键值对的形式。由此可见若使用此方法必须输入的是对象。否则无法转换。

具体的显示内容如下：

 

 

 

 

 

 

当然具体的情况还要具体分析，通过修改不同的属性来展示所要渲染的内容。感谢大神们的相助，一篇来自前端新手的总结，如有错误请见谅！