react-json-view

react-json-view

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 from 'react';
import ReactJson from 'react-json-view';

export default (props) => {
  const jsonTo = (result) => {
    if (typeof result === 'string') {
      try {
        result = JSON.parse(result);
      } catch (error) {
        result = {};
      }
    }
    if (typeof result !== 'object' && result === null) {
      return [];
    }
    return result
  }
  const propsVal = {
      name: false, // JSON数据的根节点(用默认或指定的根节点包裹自己的数据)
      src: jsonTo(props.value), // 需要展示的JSON数据
      style: {
        padding: 10,
        minHeight: '100px'
      },
      theme: 'rjv-default', // 支持base-16主题
      iconStyle: 'square', // circle(圆)、triangle(三角形)、square(正方形)
      indentWidth: 4, // 首行缩进长度
      collapsed: 2, // 节点折叠
      collapseStringsAfterLength: false, // 超出内容会变成…的功能
      displayDataTypes: true, // 数据类型会出现在数据的前缀值
      displayObjectSize: true, // 对象和数组被标记为大
  }

  return <ReactJson {...propsVal} />

预览

Props属性