JSON數據展示神器:react-json-view(常用於后台網站)

一、react-json-view - npm

官方定義: RJV is a React component for displaying and editing javascript arrays and JSON objects.

譯: RJV是一個用於顯示和編輯javascript數組和JSON對象的React組件

從字面意思上可知,它本質上是一個組件,和我們平時使用的自定義組件沒有任何區別。只是它被作者封裝固定好了相應的屬性。下面我列舉一下RJV常用的屬性和功能

屬性名	值類型	默認值	描述
src(必須)	JSON Object	無	需要展示的JSON數據
name	string或false	root	JSON數據的根節點(用默認或指定的根節點包裹自己的數據),使用null或false沒有名字
theme	string	rjv-default	RJV支持base-16主題。具體的看后面
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方法將被調用。

二、用法

前面說了RJV是一個封裝好的自定義組件.那么我們只需要你根據業務情況設置相應的屬性即可.下面我們一起熟悉一下RJV常用的一些重要屬性。

為了方便起見,我就直接運行create-react-app rjv_react,在react的腳手架構建的默認項目上面修改

步驟一: 引用

安裝引入react-json-view

//終端
npm install -D react-json-view

//code
import ReactJson from 'react-json-view'

<ReactJson src={jsonData} />

步驟二: 實現

界面樣式、邏輯初始化

初始化狀態:

為了簡便,樣式我就不貼出來了。我們簡單看一下<ReactJson />組件

import React from 'react'

import ReactJson from 'react-json-view'
import './App.css'

export default class ReactJsonView extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            mockJson:''
        }

        this.handleChange = this.handleChange.bind(this)
    }
    
    //改變textarea內容
    handleChange(e){    
        this.setState({
            mockJson: e.target.value,
        })
    }

    render(){
        let { mockJson } = this.state;
        mockJson = mockJson.length ? JSON.parse(mockJson) : {"test":123,"test1":"value"}
        return(
            <div style={{marginTop: 15}}>
                <div>
                    <textarea placeholder="請輸入JSON數據" onChange={this.handleChange} className="mockTextarea"></textarea>
                    <span style={{fontSize: 12}}>左側輸入 下面顯示</span>
                </div>
                <div  className="modal">
                    <ReactJson src={mockJson}/>
                </div>
            </div>
        )
    }
}

頁面邏輯很簡單:

• 如果用戶未輸入內容,則默認使用初始化數據渲染
• 用戶輸入內容的時候,觸發onChange事件,改變<ReactJson />src里的內容
• <ReactJson />用的是最簡單的形式,只有一個src屬性

當然,組件可以不添加src屬性
打開控制台,會發現一個警告.雖然不會阻塞頁面渲染,但是也沒有存在的意義

另外,這里推薦一個非常好用的JSON格式處理網站: 《Code Beautify》

各屬性解析

• name屬性: string 或 null || false

name用來改變根節點名字,使用不要太簡單

<ReactJson src={mockJson} name="$" />
<ReactJson src={mockJson} name={null} />

• theme屬性: string

<ReactJson />可以用組件指定的主題,也可以用base-16定制(作者的另一個開源項目:《base16》)

感興趣的同學可以研究一下base16.這里我用組件指定的一些主題

<ReactJson src={mockJson} theme="google"/>

更多主題,可以查看《演示》

• style屬性: object

實際上就是react組件的style,我們只需要按照react的寫法即可。另外值得注意的是,style會覆蓋theme主題的屬性

<ReactJson src={mockJson} style={{backgroundColor: '#888'}} theme="google"/>

• iconStyle屬性: string

這個指的是最根部(root)折疊/展開顯示的icon類型.默認是triangle(三角形)。官方文檔顯示square是默認,應該弄錯了.

<ReactJson src={mockJson} />
<ReactJson src={mockJson} iconStyle="circle"/>
<ReactJson src={mockJson} iconStyle="square"/>

• indentWidth屬性: integer(整數)

實際上修改的是子節點的padding-left值,每一個值代表5px,默認值為4
即4 * 5px = 20px;

<ReactJson src={mockJson} />
<ReactJson src={mockJson} indentWidth={16}/>

• collapsed屬性: boolean 或 integer

很經常使用的一個屬性,有時候因為json數據太長,導致展示太多不方便,就需要用到collapsed屬性控制.

默認是false全展開,設置true全部關閉,可以指定一個integer表示展開的深度

//為了更好顯示效果,我把數據加到了2層

<ReactJson src={mockJson} />
<ReactJson src={mockJson} collapsed={true}/>
<ReactJson src={mockJson} collapsed={1}/>

• collapseStringsAfterLength屬性: integer

內容過長,用...代替,非常好的一個屬性.就不用頭疼數據太長如果縮減展示了。

當然,你可以通過點擊省略的內容,組件會完整展開這個JSON數據

• enableClipboard屬性: 是否可以復制

默認是可以復制的(true)

<ReactJson src={mockJson} />
<ReactJson src={mockJson} enableClipboard={false} />

此外,復制還會觸發一個回調函數

<ReactJson src={mockJson} enableClipboard={this.handleCopy}/>

handleCopy(copy){
    console.log(copy)
}

點擊test節點,打印如下:

• displayObjectSize和displayDataTypes: boolean

這兩個不作太多解釋, 是否呈現子節點數量和子節點類型.
如果希望數據簡潔,可以都選擇false

<ReactJson src={mockJson}/>
<ReactJson src={mockJson} displayDataTypes={false}  displayObjectSize={false}/>

• onEdit、onAdd、onDelete、onSelect屬性: function

這四個屬性比較類似,都是用戶操作后觸發的回調函數,默認是false,即不觸發.

如果加上相應的事件,用戶可以在相應的JSON數據右側觸發

<ReactJson src={mockJson}/>
<ReactJson src={mockJson} onAdd={this.handleAdd}/>
<ReactJson src={mockJson} onEdit={this.handleEdit}/>
<ReactJson src={mockJson} onDelete={this.handleDelete}/>
<ReactJson src={mockJson} onSelect={this.handleSelect}/>

i. onAdd事件

handleAdd = (add) => {
    console.log('add =======>', add)
}

ii. onEdit事件

handleEdit = (edit) => {
    console.log('edit =======>', edit)
}

iii. onDelete事件

handleDelete = (deleteCont) => {
    console.log('delete =======>', deleteCont)
}

iiii. onSelect事件

handleSelect = (select) => {
    console.log('select ======>', select)
}

三、 總結

react-json-view這個開源項目真的蠻好用的。如果你是用react開發的,而且又經常和后台系統打交道,那么趕緊把這個插件收入囊中吧！ 總有一天你會用到的。

你也可以把本文當作是一個簡單文檔作為查閱.有什么解釋不清楚、錯誤的地方,歡迎指出！！！

作者更新/維護,可以及時在《react-json-view》查閱