react-json-view示例

// import the react-json-view component
import ReactJson from 'react-json-view'

// use the component in your app!
<ReactJson src={my_json_object} />

在Hooks中使用react-json-view

import React, { useState } from 'react';
import ReactJson from 'react-json-view';

interface IProps { }

const Index: React.FC<IProps> = (props) => {

  const reactJsonView = {
      "string": 'this is test ...',
      "integer": 42,
      'array': [1, 'two', NaN],
      'float': 3.14159,
      'undefined': undefined,
      'object': {},
      'string_number': '1234'
  }

  const [reactJson, setReactJson] = useState<object>(reactJsonView);

  const propsVal = {
      name: false, // JSON數(shù)據(jù)的根節(jié)點(diǎn)(用默認(rèn)或指定的根節(jié)點(diǎn)包裹自己的數(shù)據(jù))
      style: { wordBreak: 'break-all' }, // 換行
      src: { reactJson }, // 需要展示的JSON數(shù)據(jù)
      theme: 'rjv-default', // 支持base-16主題
      iconStyle: 'circle', // circle(圓)、triangle(三角形)、square(正方形)
      indentWidth: 6, // 首行縮進(jìn)長度
      collapsed: 2, // 節(jié)點(diǎn)折疊
      collapseStringsAfterLength: false, // 超出內(nèi)容會(huì)變成…的功能
      displayDataTypes: true, // 數(shù)據(jù)類型會(huì)出現(xiàn)在數(shù)據(jù)的前綴值
      displayObjectSize: true, // 對(duì)象和數(shù)組被標(biāo)記為大
  }

  return <ReactJson {...propsVal} />
}

export default Index;

Demo展示

Demo展示

Props屬性