React常用知识点

Posted 2022-11-25 秋天1014童话

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;

效果图：