React中使用react-json-view展示JSON數(shù)據(jù)的操作方法
一、前言
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)用。
三、最后
到此這篇關(guān)于React中使用react-json-view展示JSON數(shù)據(jù)的文章就介紹到這了,更多相關(guān)react-json-view展示JSON數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解如何在項目中使用jest測試react native組件
本篇文章主要介紹了詳解如何在項目中使用jest測試react native組件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-02-02react基于Ant Desgin Upload實現(xiàn)導入導出
本文主要介紹了react基于Ant Desgin Upload實現(xiàn)導入導出,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-01-01React中實現(xiàn)組件通信的幾種方式小結(jié)
在構(gòu)建復雜的React應用時,組件之間的通信是至關(guān)重要的,從簡單的父子組件通信到跨組件狀態(tài)同步,不同組件之間的通信方式多種多樣,下面我們認識react組件通信的幾種方式,需要的朋友可以參考下2024-04-04