React-JSONResult使用（JSON展示）

效果：

封裝JSONResult

JSONResult/index.js:

import PropTypes from 'prop-types';
import styles from './index.less';
import JSONTree from 'react-json-tree';
import theme from './theme';

function TestResult({ result }) {
  return (
    <div className={styles.testResult}>
      <div className={styles.inner}>
        {result ? (
          <JSONTree
            data={result}
            theme={theme}
            shouldExpandNode={() => {
              return true;
            }}
          />
        ) : (
          ''
        )}
      </div>
    </div>
  );
}
TestResult.propTypes = {
  result: PropTypes.object
};
export default TestResult;

JSONResult.less :

.testResult {
    .inner {
      height:500px;
      overflow: scroll;
      padding-left:10px;
    }
}

JSONResult/ theme.js:

const theme = {
    scheme: 'monokai',
    author: 'wimer hazenberg (http://www.monokai.nl)',
    base00: '#272822',
    base01: '#383830',
    base02: '#49483e',
    base03: '#75715e',
    base04: '#a59f85',
    base05: '#f8f8f2',
    base06: '#f5f4f1',
    base07: '#f9f8f5',
    base08: '#f92672',
    base09: '#fd971f',
    base0A: '#f4bf75',
    base0B: '#a6e22e',
    base0C: '#a1efe4',
    base0D: '#66d9ef',
    base0E: '#ae81ff',
    base0F: '#cc6633'
  };
  export default theme;

使用：

import JSONResult from 'components/JSONResult';

<JSONResult result={testResult} />