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、原數據是以=分割的一個字符串，通過轉換變成鍵值對的形式。由此可見若使用此方法必須輸入的是對象。否則無法轉換。

具體的顯示內容如下：

 

 

 

 

 

 

當然具體的情況還要具體分析，通過修改不同的屬性來展示所要渲染的內容。感謝大神們的相助，一篇來自前端新手的總結，如有錯誤請見諒！