一、前言

react-json-view（RJV）是一個用于顯示和編輯javascript數組和JSON對象的React組件。

1.1、在線demo

1.2、Github倉庫

二、實踐

2.1、安裝react-json-view

安裝插件，在這推薦大家在項目中用 yarn 安裝插件，yarn的出錯幾率比npm低很多。

npm install --save react-json-view
// 或者
yarn react-json-view

2.2、組件封裝

/*** @Description: 格式化顯示json數據 react-json-view* @github https://github.com/mac-s-g/react-json-view* @demo https://mac-s-g.github.io/react-json-view/demo/dist/* @author 小馬甲丫* @date 2023-12-06 01:26:47*/
import ReactJsonView from 'react-json-view';const ReactJson = (props) => {return (<ReactJsonViewname={false} // 根節點名字collapsed={false} // 是否收起,true為收起indentWidth={4} // 縮進iconStyle="triangle"src={props.value}theme="grayscale:inverted"enableClipboard // 點擊向左箭頭進行復制displayObjectSize={false} // 顯示有多少個items屬性displayDataTypes={false} // 顯示值的類型sortKeys // 鍵的排序quotesOnKeys={false} // 是否顯示a鍵的引號/>);
};export default ReactJson;

2.3、效果

傳入的數據是數組，如下所示：

2.4、參數詳解

2.4.1、src(必須) ：JSON Object

默認值：無

需要展示的JSON數據

2.4.2、name：string或false

默認值：root

JSON數據的根節點(用默認或指定的根節點包裹自己的數據)，使用null或false沒有名字

2.4.3、theme：string

默認值：rjv-default

RJV支持base-16主題

2.4.4、style：object

默認值：{}

可以通過style添加、修改樣式，可覆蓋主題默認提供的屬性

2.4.5、iconStyle：string

默認值：triangle

接受參數：circle(圓)、triangle(三角形)、square(圓)

2.4.6、indentWidth：integer

默認值：4

JSON嵌套對象的縮進值

2.4.7、collapsed：boolean

默認值：false

當設置為true，默認情況下，所有節點都將被折疊。使用整數值在特定深度折疊。

2.4.8、collapseStringsAfterLength：boolean

默認值：false

這個就是超出內容會變成…的功能。當一個整數值被賦值時，字符串就會在這個長度后面接上省略號。可以通過單擊字符串值來展開和折疊字符串內容

2.4.9、shouldCollapse：(field)=>{}

默認值：false

回調函數來提供對默認情況下應該折疊的對象和數組的控制。對象被傳遞給包含name, src, type(“數組”或“對象”)和namespace

2.4.10、displayObjectSize：boolean

默認值：true

當設置為true，對象和數組被標記為大小。例如: { a: 'a1',b: 'b1' }，會顯示2 items

2.4.11、displayDataTypes：boolean

默認值：true

當設置為true，數據類型會出現在數據的前綴值.例如: { a: 123, b: 'b1'}，會顯示{ a: int 123, b: string 'b1'}

2.4.12、onEdit：(edit)=>{}

默認值：false

當傳入回調函數時，edit功能已啟用。在編輯完成之后調用回調。

2.4.13、onAdd：(add)=>{}

默認值：false

當傳入回調函數時，add功能已啟用。在完成添加之后調用回調。

2.4.14、onDelete：(delete)=>{}

默認值：false

當傳入回調函數時，delete功能已啟用。在完成刪除之后調用回調。

2.4.15、onSelect：(select)=>{}

默認值：false

當傳入函數時，單擊值將觸發onSelect方法將被調用。

三、最后

本人每篇文章都是一字一句碼出來，希望大佬們多提提意見。順手來個三連擊，點贊👍收藏💖關注?。創作不易，給我打打氣，加加油?