一、前言

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

1.1、在線demo

1.2、Github倉庫

二、實(shí)踐

2.1、安裝react-json-view

安裝插件，在這推薦大家在項(xiàng)目中用 yarn 安裝插件，yarn的出錯(cuò)幾率比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é)點(diǎn)名字
      collapsed={false} // 是否收起,true為收起
      indentWidth={4} // 縮進(jìn)
      iconStyle="triangle"
      src={props.value}
      theme="grayscale:inverted"
      enableClipboard // 點(diǎn)擊向左箭頭進(jìn)行復(fù)制
      displayObjectSize={false} // 顯示有多少個(gè)items屬性
      displayDataTypes={false} // 顯示值的類型
      sortKeys // 鍵的排序
      quotesOnKeys={false} // 是否顯示a鍵的引號
    />
  );
};
export default ReactJson;

2.3、效果

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

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

默認(rèn)值：無

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

2.4.2、name：string或false

默認(rèn)值：root

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

2.4.3、theme：string

默認(rèn)值：rjv-default

RJV支持base-16主題

2.4.4、style：object

默認(rèn)值：{}

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

2.4.5、iconStyle：string

默認(rèn)值：triangle

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

2.4.6、indentWidth：integer

默認(rèn)值：4

JSON嵌套對象的縮進(jìn)值

2.4.7、collapsed：boolean

默認(rèn)值：false

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

2.4.8、collapseStringsAfterLength：boolean

默認(rèn)值：false

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

2.4.9、shouldCollapse：(field)=>{}

默認(rèn)值：false

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

2.4.10、displayObjectSize：boolean

默認(rèn)值：true

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

2.4.11、displayDataTypes：boolean

默認(rèn)值：true

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

2.4.12、onEdit：(edit)=>{}

默認(rèn)值：false

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

2.4.13、onAdd：(add)=>{}

默認(rèn)值：false

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

2.4.14、onDelete：(delete)=>{}

默認(rèn)值：false

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

2.4.15、onSelect：(select)=>{}

默認(rèn)值：false

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

三、最后

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

最新評論