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裡的內容
當然,元件可以不新增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}/>- onAdd事件
handleAdd = (add) => {
console.log('add =======>', add)
}
- onEdit事件
handleEdit = (edit) => {
console.log('edit =======>', edit)
}
- onDelete事件
handleDelete = (deleteCont) => {
console.log('delete =======>', deleteCont)
}
- onSelect事件
handleSelect = (select) => {
console.log('select ======>', select)
}
三、 總結
react-json-view這個開源專案真的蠻好用的。如果你是用react開發的,而且又經常和後臺系統打交道,那麼趕緊把這個外掛收入囊中吧！ 總有一天你會用到的。
你也可以把本文當作是一個簡單文件作為查閱.有什麼解釋不清楚、錯誤的地方,歡迎指出！！！