记录一次使用React编写的JSON格式化插件

效果图：

index.tsx


  1 import React from 'react'
  2 import less from './index.less'
  3 
  4 export default class App extends React.Component<{
  5     JSONObject: any,
  6     //是否需要逗号分隔
  7     split?: boolean,
  8     //是否转换成JSON字符串(key加双引号)
  9     JSONToString?: boolean,
 10 }>{
 11     state = {
 12         toJSONOk: false
 13     }
 14     public getEL = (object: any) => {
 15         const { split: isSplit, JSONToString } = this.props;
 16         let result;
 17         if (object instanceof Array) {
 18             result = (
 19                 <span key="JSONArray">
 20                     <span key="[" className={less.borderLine}>[</span>
 21                     {object.map((o, index) => {
 22                         let split = isSplit ? ',' : ''
 23                         if (index === object.length - 1) split = '';
 24                         return <div style={{ marginLeft: 15 }} key={index}>{this.getEL(o)}<span className={less.borderLine}>{split}</span></div>;
 25                     })}
 26                     <span key="]" className={less.borderLine}>]</span>
 27                 </span>
 28             )
 29         } else if (typeof object === "function") {
 30             result = (
 31                 <span key="function" className={less.function}>
 32                     {`"${object.constructor}"`}
 33                 </span>
 34             )
 35         } else if (object instanceof Object) {
 36             result = (
 37                 <span key="JSONObject">
 38                     <span key="{"><span className={less.borderLine}>{'{'}</span></span>
 39                     {Object.keys(object).map((k, index, arr) => {
 40                         let split = isSplit ? ',' : ''
 41                         let quot = JSONToString ? `"` : '';
 42                         if (index === arr.length - 1) split = '';
 43                         return (
 44                             <div key={k} className={less.left4}>
 45                                 <span className={less.objectKey}>
 46                                     <span className={less.borderLine}>{quot}</span>
 47                                     {k}
 48                                     <span className={less.borderLine}>{quot}</span>
 49                                     <span style={{ marginLeft: 5 }}>:</span>
 50                                 </span>
 51                                 {this.getEL(object[k])}
 52                                 <span className={less.borderLine}>
 53                                     {split}
 54                                 </span>
 55                             </div>
 56                         )
 57                     })}
 58                     <span key="}"><span className={less.borderLine}>{'}'}</span></span>
 59                 </span>
 60             )
 61         } else {
 62             if (typeof object === "undefined") {
 63 
 64                 result = (
 65                     <span key="undefined" className={less.undefined}>
 66                         undefined
 67                     </span>
 68                 )
 69             }
 70             if (typeof object === "boolean") {
 71                 result = (
 72                     <span key="boolean" className={less.boolean}>
 73                         {object + ""}
 74                     </span>
 75                 )
 76             }
 77             if (typeof object === "number") {
 78                 result = (
 79                     <span key="number" className={less.number}>
 80                         {object + ""}
 81                     </span>
 82                 )
 83             }
 84             if (typeof object === "string") {
 85                 result = (
 86                     <span key="string">
 87                         <span key="1" className={less.borderLine}>"</span>
 88                         <span key="2" className={less.string}>{object}</span>
 89                         <span key="3" className={less.borderLine}>"</span>
 90                     </span>
 91                 )
 92             }
 93             if (object === null) {
 94                 result = (
 95                     <span key="null" className={less.null}>
 96                         null
 97                     </span>
 98                 )
 99             }
100         }
101         return <span className={less.root}>{result}</span>;
102     }
103 
104     public render() {
105         const { JSONObject } = this.props;
106         return this.getEL(JSONObject)
107     }
108 }
 1 .left4{
 2     margin-left: 30px !important;
 3     margin-top:2px;
 4 }
 5 
 6 .objectKey{
 7     color: #4a0;
 8     font-weight: bold;
 9     display: inline;
10     white-space: nowrap;
11     padding-right: 10px;
12 }
13 
14 .borderLine{
15     font-weight: bold;
16 }
17 .root{
18     font-size: 16px
19 }
20 .string{
21     color:red
22 }
23 .boolean{
24     color:slateblue
25 }
26 .number{
27     color:#faad14
28 }
29 .undefined{
30     color:gray
31 }
32 .null{
33     color: #096dd9
34 }
35 .function{
36     color:red
37 }

 

posted @ 2018-10-18 22:25  但高  阅读(4381)  评论(0)    收藏  举报