一、前言

react-json-view（RJV）是一個用于顯示和編輯javascript數(shù)組和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數(shù)據(jù) 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 (
    <ReactJsonView
      name={false} // 根節(jié)點名字
      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、效果

傳入的數(shù)據(jù)是數(shù)組，如下所示：

2.4、參數(shù)詳解 2.4.1、src(必須) ：JSON Object

默認值：無

需要展示的JSON數(shù)據(jù)

2.4.2、name：string或false

默認值：root

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

2.4.3、theme：string

默認值：rjv-default

RJV支持base-16主題

2.4.4、style：object

默認值：{}

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

2.4.5、iconStyle：string

默認值：triangle

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

2.4.6、indentWidth：integer

默認值：4

JSON嵌套對象的縮進值

2.4.7、collapsed：boolean

默認值：false

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

2.4.8、collapseStringsAfterLength：boolean

默認值：false

這個就是超出內(nèi)容會變成…的功能。當一個整數(shù)值被賦值時，字符串就會在這個長度后面接上省略號?？梢酝ㄟ^單擊字符串值來展開和折疊字符串內(nèi)容

2.4.9、shouldCollapse：(field)=>{}

默認值：false

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

2.4.10、displayObjectSize：boolean

默認值：true

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

2.4.11、displayDataTypes：boolean

默認值：true

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

2.4.12、onEdit：(edit)=>{}

默認值：false

當傳入回調(diào)函數(shù)時，edit功能已啟用。在編輯完成之后調(diào)用回調(diào)。

2.4.13、onAdd：(add)=>{}

默認值：false

當傳入回調(diào)函數(shù)時，add功能已啟用。在完成添加之后調(diào)用回調(diào)。

2.4.14、onDelete：(delete)=>{}

默認值：false

當傳入回調(diào)函數(shù)時，delete功能已啟用。在完成刪除之后調(diào)用回調(diào)。

2.4.15、onSelect：(select)=>{}

默認值：false

當傳入函數(shù)時，單擊值將觸發(fā)onSelect方法將被調(diào)用。

三、最后

到此這篇關于React中使用react-json-view展示JSON數(shù)據(jù)的文章就介紹到這了,更多相關react-json-view展示JSON數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論