?最近業(yè)務(wù)上需要用到j(luò)son可視化的需求，在這給大家安利一個前端頁面很好用的插件react-json-view
第一步：安裝插件npm install --save react-json-view 或者 yarn react-json-view，在這推薦大家在項目中用 yarn 安裝插件，yarn的出錯幾率比npm低很多。
第二步：import ReactJson from 'react-json-view';引入，以組件的形式直接使用<ReactJson src={my_important_json} theme="monokai" />，組件主要接受兩個參數(shù)，src是想要展示的json數(shù)據(jù)，還有個配置屬性，以對象的形式寫入，<ReactJson { ...this.state.jsonOptions } src={ this.state.payerData } />，
第三部：插件的所有配置參數(shù)
1.src(必須) ：JSON Object
????默認值：無
????需要展示的JSON數(shù)據(jù)
2.name：string或false
????默認值：root
????JSON數(shù)據(jù)的根節(jié)點(用默認或指定的根節(jié)點包裹自己的數(shù)據(jù))，使用null或false沒有名字
3.theme：string
????默認值：rjv-default
????RJV支持base-16主題。更多主題參考
4.style：object
????默認值：{}
????可以通過style添加、修改樣式，可覆蓋主題默認提供的屬性
5.iconStyle：string
????默認值：triangle
????接受參數(shù):circle(圓)、triangle(三角形)、square(圓)
6.indentWidth：integer(整數(shù))
????默認值：4
????JSON嵌套對象的縮進值
7.collapsed：boolean或integer
????默認值：false
????當(dāng)設(shè)置為true，默認情況下，所有節(jié)點都將被折疊。使用整數(shù)值在特定深度折疊。
8.collapseStringsAfterLength：integer
????默認值：false
????這個就是超出內(nèi)容會變成…的功能。當(dāng)一個整數(shù)值被賦值時，字符串就會在這個長度后面接上省略號。可以通過單擊字符串值來展開和折疊字符串內(nèi)容
9.shouldCollapse：(field)=>{}
????默認值：false
回調(diào)函數(shù)來提供對默認情況下應(yīng)該折疊的對象和數(shù)組的控制。對象被傳遞給包含name, src, type(“數(shù)組”或“對象”)和namespace
10.displayObjectSize：boolean
????默認值：true
當(dāng)設(shè)置為true，對象和數(shù)組被標(biāo)記為大小。例如: { a: ‘a(chǎn)1’,b: ‘b1’ },會顯示2 items
11.displayDataTypes：boolean
????默認值：true
當(dāng)設(shè)置為true，數(shù)據(jù)類型會出現(xiàn)在數(shù)據(jù)的前綴值.例如: { a: 123, b: ‘b1’},會顯示{ a: int 123, b: string ‘b1’}
12.onEdit：(edit)=>{}
????默認值：false
????當(dāng)傳入回調(diào)函數(shù)時，edit功能已啟用。在編輯完成之后調(diào)用回調(diào)。
13.onAdd：(add)=>{}
????默認值：false
????當(dāng)傳入回調(diào)函數(shù)時，add功能已啟用。在完成添加之后調(diào)用回調(diào)。
14.onDelete：(delete)=>{}
????默認值：false
????當(dāng)傳入回調(diào)函數(shù)時，delete功能已啟用。在完成刪除之后調(diào)用回調(diào)。
15.onSelect：(select)=>{}
????默認值：false
????當(dāng)傳入函數(shù)時，單擊值將觸發(fā)onSelect方法將被調(diào)用。
下面貼出完整實例：
import React from 'react';
import ReactJson from 'react-json-view';
import { getPayer } from '@/service/allApi';
class Payer extends React.Component{
? constructor( props ) {
? ? super( props );
? ? this.state = {
? ? ? payerData: {},
? ? ? jsonOptions: {
? ? ? ? displayDataTypes: false,
? ? ? ? collapseStringsAfterLength: 20,
? ? ? ? onEdit: ( edit ) => {
? ? ? ? ? console.log('編輯' , edit);
? ? ? ? },
? ? ? ? onAdd: ( add ) => {
? ? ? ? ? console.log('新增' , add);
? ? ? ? }
? ? ? }
? ? }
? }
? componentDidMount() {
? ? this.getPayerData();
? }
? getPayerData = async () => {
? ? const res = await getPayer(1);
? ? if ( res.data.code === 0 ) {
? ? ? this.setState({
? ? ? ? payerData: res.data.data
? ? ? })
? ? }
? }
? render() {
? ? return (
? ? ? <div style={{ width: '100%' , height: '100%' , overflow: 'auto'}}>
? ? ? ? payer
? ? ? ? <ReactJson { ...this.state.jsonOptions } src={ this.state.payerData } />
? ? ? </div>
? ? )
? }
}
export default Payer;
