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数据的根节点(用默认或指定的根节点包裹自己的数据)
      style: { wordBreak: 'break-all' }, // 换行
      src: { reactJson }, // 需要展示的JSON数据
      theme: 'rjv-default', // 支持base-16主题
      iconStyle: 'circle', // circle(圆)、triangle(三角形)、square(正方形)
      indentWidth: 6, // 首行缩进长度
      collapsed: 2, // 节点折叠
      collapseStringsAfterLength: false, // 超出内容会变成…的功能
      displayDataTypes: true, // 数据类型会出现在数据的前缀值
      displayObjectSize: true, // 对象和数组被标记为大
  }

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

export default Index;

Demo展示

Demo展示

Props属性