React常用知識點

1、jsonResult - json展示

import { Tabs, Form, Input, Alert, Button, Spin } from 'antd';
import JSONResult from 'components/JSONResult';

class TestTab extends React.Component {
	...
	render(){
	 	const { testAccounts, testResult, resultLoading, attentionLoading } = this.state;
		return (
			<div className={styles.testResult}>
	          <div className={styles.result}>
	            <Spin spinning={resultLoading}>
	              <JSONResult result={testResult} />
	            </Spin>
	          </div>
	        </div>
		);
	}
}
export default TestTab;

JSONResult組件包含 JSONResult/index.js, JSONResult/index.less, JSONResult/theme.js 三個文件：
其中，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/index.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;

效果圖：