Json字符串的高亮显示 react-jsx

2021-06-03 10:02:02 阅读：216 来源： 互联网

标签：className return object value react Json deepIndent null jsx

 1 import React from 'react'
 2 import styles from './json.less'
 3 
 4 const indent = <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
 5 
 6 const objectToJsonCode = (object = {}, objectKey = null, deepIndent = null, parentIsArray = false, isArray = false) => {
 7   const result = Object.entries(object).map(([key, value], index, data) => {
 8     if (value instanceof Array || value instanceof Object) {
 9       return <>
10         {objectToJsonCode(value, key, <>{deepIndent}{indent}</>, object instanceof Array, value instanceof Array)}
11         {data.length === index + 1 ? null : ','}
12         <br/>
13       </>
14     }
15     const type = Object.prototype.toString.call(value)
16     let className = 'string'
17     switch (type) {
18       case '[object Boolean]':
19         className = 'boolean'
20         break
21       case '[object String]':
22         className = 'string'
23         break
24       case '[object Number]':
25         className = 'number'
26         break
27       default:
28         className = 'string'
29     }
30     return (<>
31       {deepIndent}{indent}
32       {isArray ? null : <span className={styles.key}>{`"${key}": `}</span>}
33       <span className={styles[className]}>
34         {
35           (() => {
36             let valueString
37             switch (className) {
38               case 'string':
39                 valueString = `"${value}"`
40                 break
41               case 'boolean':
42                 valueString = value.toString()
43                 break
44               default:
45                 valueString = value
46             }
47             return valueString
48           })()
49         }
50       </span>
51       {data.length === index + 1 ? <br/> : ','}
52       {data.length !== index + 1 ? <br/> : null}
53     </>)
54   })
55 
56   if (object instanceof Array) {
57     return <>
58       {deepIndent}
59       {parentIsArray ? null : <span className={styles.key}>{objectKey === null ? '' : `"${objectKey}": `}</span>}
60       {result.length === 0 ?
61         <span>[]</span> :
62         <><span>[</span> <br/> {result} {deepIndent}<span>]</span></>
63       }
64     </>
65   }
66   return <>
67     {deepIndent}
68     {parentIsArray ? null : <span className={styles.key}>{objectKey === null ? '' : `"${objectKey}": `}</span>}
69     {result.length === 0 ?
70       <span>{'{}'}</span> :
71       <><span>{'{'}</span> <br/>{result} {deepIndent}<span>{'}'}</span></>
72     }
73   </>
74 }
75 
76 export default objectToJsonCode

1 pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
2 .string { color: green; }
3 .number { color: darkorange; }
4 .boolean { color: blue; }
5 .null { color: magenta; }
6 .key { color: red; }

使用:

<pre style={{maxWidth:'640px'}}>{objectToJsonCode(jsonString)}</pre> 效果图:

标签：className,return,object,value,react,Json,deepIndent,null,jsx
来源： https://www.cnblogs.com/huic/p/14843982.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Json字符串的高亮显示 react-jsx