{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/plus/jsonviewer","result":{"data":{"current":{"frontmatter":{"title":"JsonViewer Json编辑器","order":32,"brief":"用于展示和编辑 JSON 数据","icon":"doc-jsonviewer"},"fields":{"type":"plus"},"tableOfContents":{"items":[{"url":"#使用场景","title":"使用场景"},{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#设置行高","title":"设置行高"},{"url":"#自动换行","title":"自动换行"},{"url":"#格式化配置","title":"格式化配置"},{"url":"#自定义渲染规则","title":"自定义渲染规则"},{"url":"#自定义搜索按钮","title":"自定义搜索按钮"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#jsonviewer","title":"JsonViewer"},{"url":"#jsonvieweroptions","title":"JsonViewerOptions"},{"url":"#customrenderrule","title":"CustomRenderRule"},{"url":"#formattingoptions","title":"FormattingOptions"},{"url":"#searchcontrols","title":"SearchControls"}]},{"url":"#methods","title":"Methods","items":[{"url":"#performance","title":"Performance","items":[{"url":"#bundle-size","title":"Bundle Size"},{"url":"#渲染不同量级数据耗时","title":"渲染不同量级数据耗时"}]}]}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"localeCode\": \"zh-CN\",\n \"order\": 32,\n \"category\": \"Plus\",\n \"title\": \"JsonViewer Json编辑器\",\n \"icon\": \"doc-jsonviewer\",\n \"dir\": \"column\",\n \"noInline\": true,\n \"brief\": \"用于展示和编辑 JSON 数据\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u4F7F\\u7528\\u573A\\u666F\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"JsonViewer \\u7EC4\\u4EF6\\u53EF\\u7528\\u4E8E JSON \\u6570\\u636E\\u7684\\u5C55\\u793A\\u4E0E\\u7F16\\u8F91\\u3002\\nSemi \\u91CD\\u70B9\\u53C2\\u8003\\u4E86 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/microsoft/vscode\"\n }, \"VS Code\"), \"\\u7684 text-buffer \\u6570\\u636E\\u7ED3\\u6784\\u8BBE\\u8BA1\\u601D\\u8DEF\\uFF0C\\u590D\\u7528\\u4E86\\u90E8\\u5206 utils\\u4E0E\\u6570\\u636E\\u7C7B\\u578B\\u5B9A\\u4E49\\uFF08Token\\u89E3\\u6790\\uFF0C\\u8BED\\u8A00\\u670D\\u52A1\\u7B49\\uFF09\\uFF0C\\u7ED3\\u5408\\u6211\\u4EEC\\u7684\\u529F\\u80FD/\\u6837\\u5F0F\\u5B9A\\u5236\\u9700\\u6C42\\uFF0C\\u5B9E\\u73B0\\u4E86 JsonViewer \\u7EC4\\u4EF6, \\u89C6\\u89C9\\u4E0A\\u4F1A\\u4E0E Semi Design \\u4F53\\u7CFB\\u5185\\u7684\\u5176\\u4ED6\\u7EC4\\u4EF6\\u66F4\\u534F\\u8C03\\uFF0C\\u5BF9\\u4E8E\\u7279\\u5B9A\\u6570\\u636E\\u7C7B\\u578B\\u7684\\u5B9A\\u5236\\u5316\\u6E32\\u67D3\\u5B9A\\u5236\\u4F1A\\u66F4\\u65B9\\u4FBF\\u3002\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\u76F8\\u6BD4\\u4E8E\\u76F4\\u63A5\\u4F7F\\u7528 MonacoEditor\\uFF0CSemi JsonViewer \\u5728\\u5DE5\\u7A0B\\u5316\\u6784\\u5EFA\\u4E0A\\u505A\\u4E86\\u989D\\u5916\\u5904\\u7406\\uFF0C\\u4F7F\\u7528\\u66F4\\u4E3A\\u7B80\\u5355\\uFF0C\\u65E0\\u9700\\u5173\\u6CE8 Webpack\\u63D2\\u4EF6\\u3001worker loader\\u7B49\\u590D\\u6742\\u7684\\u914D\\u7F6E\\u3002\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\u540C\\u65F6\\u7531\\u4E8E\\u6211\\u4EEC\\u4EC5\\u5173\\u6CE8 Json \\u6570\\u636E\\u683C\\u5F0F\\uFF0C\\u66F4\\u8F7B\\u91CF\\u5316\\uFF0C\\u5728\\u5F00\\u7BB1\\u5373\\u7528\\u7684\\u540C\\u65F6\\uFF0C\\u62E5\\u6709\\u66F4\\u5C0F\\u7684\\u4F53\\u79EF\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\uFF08\\uD83D\\uDCE6 -96%\\uFF09\"), \" \\uFF0C\\u66F4\\u6781\\u81F4\\u7684\\u52A0\\u8F7D\\u901F\\u5EA6\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\uFF08\\uD83D\\uDE80 -53.5%\\uFF09\"), \" \\uFF0C\\u66F4\\u5C11\\u7684\\u5185\\u5B58\\u5360\\u7528\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\uFF08\\u2B07\\uFE0F 71.6%\\uFF09\"), \"\\u3002\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\u5BF9\\u4E8E\\u4E94\\u767E\\u4E07\\u884C\\u53CA\\u4EE5\\u4E0B\\u7684\\u6570\\u636E\\uFF0C\\u5747\\u53EF\\u4EE5\\u505A\\u52301s\\u5185\\u5B8C\\u6210\\u6570\\u636E\\u52A0\\u8F7D\\u4E0E\\u89E3\\u6790\\u3002\\n\\u8BE6\\u7EC6\\u7684\\u5BF9\\u6BD4\\u6570\\u636E\\u53EF\\u67E5\\u9605 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#Performance\"\n }, \"Performance\"), \" \\u7AE0\\u8282\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5982\\u679C\\u4F60\\u4EC5\\u9700\\u8981\\u5BF9 Json \\u505A\\u9884\\u89C8/\\u7F16\\u8F91\\uFF0C\\u65E0\\u9700\\u5BF9\\u66F4\\u590D\\u6742\\u7684\\u5176\\u4ED6\\u7F16\\u7A0B\\u8BED\\u8A00\\u4F5C\\u4FEE\\u6539\\uFF0C\\u6211\\u4EEC\\u5EFA\\u8BAE\\u4F60\\u9009\\u7528 JsonViewer\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5982\\u679C\\u4F60\\u8FD8\\u9700\\u8981\\u5904\\u7406\\u5176\\u4ED6\\u683C\\u5F0F\\u7684\\u6570\\u636E/\\u4EE3\\u7801\\u6587\\u4EF6\\uFF0C\\u5B8C\\u6574\\u7684\\u4EE3\\u7801\\u7F16\\u8F91\\u5668\\u80FD\\u529B\\uFF08\\u8BED\\u6CD5\\u9AD8\\u4EAE\\u3001\\u4EE3\\u7801\\u8865\\u5168\\u3001\\u9519\\u8BEF\\u63D0\\u793A\\u3001\\u590D\\u6742\\u7F16\\u8F91\\u7B49\\uFF09\\u662F\\u521A\\u9700\\uFF0C\\u6784\\u5EFA\\u4EA7\\u7269\\u4F53\\u79EF\\u4E0D\\u662F\\u5173\\u6CE8\\u91CD\\u70B9\\uFF0C\\u6211\\u4EEC\\u5EFA\\u8BAE\\u4F60\\u9009\\u7528 Monaco Editor\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"JsonViewer \\u4ECE v2.71.0 \\u5F00\\u59CB\\u652F\\u6301\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"import\",\n \"import\": true\n }, \"import { JsonViewer } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"JsonViewer \\u7684\\u57FA\\u672C\\u7528\\u6CD5\\u3002\\u4F20\\u5165 height \\u548C width \\u53C2\\u6570\\uFF0C\\u8BBE\\u7F6E\\u7EC4\\u4EF6\\u7684\\u9AD8\\u5EA6\\u548C\\u5BBD\\u5EA6\\u548C\\u521D\\u59CB\\u503C\\u3002\\u901A\\u8FC7 value \\u4F20\\u5165 Json \\u5B57\\u7B26\\u4E32\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\u6CE8\\u610F\\uFF1AJsonViewer \\u4E3A\\u975E\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF0C\\u82E5\\u4F20\\u5165 value \\u5C5E\\u6027\\u4E3A\\u53D7\\u63A7\\u5C5E\\u6027\\u5373React State\\uFF0C\\u4E0D\\u5EFA\\u8BAE\\u5728 onChange \\u4E2D\\u4FEE\\u6539 value \\u5C5E\\u6027\\u5373setState\\u64CD\\u4F5C\\u3002\\u82E5\\u9700\\u8981\\u83B7\\u53D6\\u7EC4\\u4EF6\\u7684\\u503C\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 ref \\u83B7\\u53D6\\uFF0C\\u5177\\u4F53\\u53EF\\u53C2\\u8003 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"#Methods\"\n }, \"Methods\"), \"\\u3002\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React from 'react';\\nimport { JsonViewer } from '@douyinfe/semi-ui';\\nconst data = `{\\n \\\"name\\\": \\\"Semi\\\",\\n \\\"version\\\": \\\"0.0.0\\\"\\n}`;\\nclass SimpleJsonViewer extends React.Component {\\n render() {\\n return (\\n
\\n \\n
\\n );\\n }\\n}\\n\\nrender(SimpleJsonViewer);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u8BBE\\u7F6E\\u884C\\u9AD8\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u914D\\u7F6E options \\u7684 lineHeight \\u53C2\\u6570\\uFF0C\\u8BBE\\u7F6E\\u56FA\\u5B9A\\u884C\\u9AD8\\uFF08\\u5355\\u4F4D\\uFF1Apx, \\u9ED8\\u8BA4 18\\uFF09\\u3002\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React from 'react';\\nimport { JsonViewer, Space } from '@douyinfe/semi-ui';\\nconst data = `{\\n \\\"name\\\": \\\"Semi\\\",\\n \\\"version\\\": \\\"0.0.0\\\"\\n}`;\\nfunction SimpleJsonViewerWithLineHeight() {\\n return (\\n
\\n
\\n \\n
\\n
\\n \\n
\\n
\\n \\n
\\n
\\n )\\n}\\n\\nrender(SimpleJsonViewerWithLineHeight);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u81EA\\u52A8\\u6362\\u884C\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u914D\\u7F6E options \\u7684 autoWrap \\u53C2\\u6570\\uFF0C\\u8BBE\\u7F6E\\u4E3A true \\u65F6\\uFF0C\\u7EC4\\u4EF6\\u4F1A\\u6839\\u636E\\u5185\\u5BB9\\u957F\\u5EA6\\u81EA\\u52A8\\u6362\\u884C\\u3002\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React from 'react';\\nimport { JsonViewer } from '@douyinfe/semi-ui';\\nconst data = `{\\n \\\"name\\\": \\\"Semi\\\",\\n \\\"version\\\": \\\"0.0.0\\\",\\n \\\"description\\\": \\\"Semi Design is a design system that defines a set of mid_back design and front_end basic components.\\\"\\n}`;\\nfunction SimpleJsonViewerWithAutoWrap() {\\n return (\\n
\\n \\n
\\n );\\n}\\n\\nrender(SimpleJsonViewerWithAutoWrap);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u683C\\u5F0F\\u5316\\u914D\\u7F6E\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u914D\\u7F6E options \\u7684 formatOptions \\u53C2\\u6570\\uFF0C\\u8BBE\\u7F6E\\u7EC4\\u4EF6\\u7684\\u683C\\u5F0F\\u5316\\u914D\\u7F6E\\u3002\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"tabSize: number\\uFF0C\\u8BBE\\u7F6E\\u7F29\\u8FDB\\u5927\\u5C0F\\u4E3A4\\uFF0C\\u8868\\u793A\\u6BCF\\u7EA7\\u7F29\\u8FDB 4 \\u4E2A\\u7A7A\\u683C\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"insertSpaces: boolean\\uFF0Ctrue \\u8868\\u793A\\u4F7F\\u7528\\u7A7A\\u683C\\u8FDB\\u884C\\u7F29\\u8FDB\\uFF0Cfalse \\u8868\\u793A\\u4F7F\\u7528\\u5236\\u8868\\u7B26(Tab)\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"eol: string\\uFF0C\\u8BBE\\u7F6E\\u6362\\u884C\\u7B26\\uFF0C\\u53EF\\u4EE5\\u662F\\\\n\\uFF0C\\\\r\\\\n\\uFF0C\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React, { useRef } from 'react';\\nimport { JsonViewer, Button } from '@douyinfe/semi-ui';\\nconst data = `{\\n \\\"name\\\": \\\"Semi\\\",\\n \\\"version\\\": \\\"0.0.0\\\"\\n}`;\\nfunction FormatJsonComponent() {\\n const jsonviewerRef = useRef();\\n return (\\n
\\n \\n
\\n \\n
\\n
\\n );\\n}\\n\\nrender(FormatJsonComponent);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u89C4\\u5219\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7\\u914D\\u7F6E \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"options.customRenderRule\"), \" \\u53C2\\u6570\\uFF0C\\u4F60\\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49 JSON \\u5185\\u5BB9\\u7684\\u6E32\\u67D3\\u65B9\\u5F0F\\uFF08\\u6CE8\\u610F\\uFF1A\\u4EC5\\u5728\\u53EA\\u8BFB\\u6A21\\u5F0F\\u4E0B\\u751F\\u6548\\uFF09\\u3002\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"customRenderRule\"), \" \\u662F\\u4E00\\u4E2A\\u89C4\\u5219\\u6570\\u7EC4\\uFF0C\\u6BCF\\u6761\\u89C4\\u5219\\u5305\\u542B\\u4E24\\u4E2A\\u5C5E\\u6027\\uFF1A\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"match\"), \": \\u5339\\u914D\\u6761\\u4EF6\\uFF0C\\u53EF\\u4EE5\\u662F\\u4EE5\\u4E0B\\u4E09\\u79CD\\u7C7B\\u578B\\u4E4B\\u4E00\\uFF1A\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5B57\\u7B26\\u4E32\\uFF1A\\u7CBE\\u786E\\u5339\\u914D\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u6B63\\u5219\\u8868\\u8FBE\\u5F0F\\uFF1A\\u6309\\u6B63\\u5219\\u5339\\u914D\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u51FD\\u6570\\uFF1A\\u81EA\\u5B9A\\u4E49\\u5339\\u914D\\u903B\\u8F91\\uFF0C\\u51FD\\u6570\\u7B7E\\u540D\\u4E3A \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"(value: string, path: string) => boolean\"), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"value\"), \": \\u5F85\\u5339\\u914D\\u7684\\u503C\\uFF08\\u4E3AJson\\u5B57\\u7B26\\u4E32\\u7684\\u952E\\u503C\\u5BF9\\u7684\\u952E\\u6216\\u8005\\u503C\\uFF0C\\u7531\\u4E8E\\u5185\\u90E8\\u5904\\u7406\\u6CE8\\u5165\\u65F6\\u4EC5\\u8FC7\\u6EE4\\u5F15\\u53F7\\uFF0C\\u56E0\\u6B64\\u7C7B\\u578B\\u5168\\u90E8\\u4E3Astring\\uFF09\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"path\"), \": \\u5F53\\u524D\\u5339\\u914D\\u5230\\u7684\\u8DEF\\u5F84\\uFF0C\\u683C\\u5F0F\\u4E3A \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"root.key1.key2.key3[0].key4\")))))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"render\"), \": \\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u51FD\\u6570\\uFF0C\\u51FD\\u6570\\u7B7E\\u540D\\u4E3A \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"(content: string) => React.ReactNode\"), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"content\"), \": \\u5339\\u914D\\u5230\\u7684\\u5185\\u5BB9\\u3002\\u5982\\u679C\\u662F\\u5B57\\u7B26\\u4E32\\u7C7B\\u578B\\u7684\\u503C\\uFF0C\\u5C06\\u5305\\u542B\\u53CC\\u5F15\\u53F7\\uFF08\\u5982 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\\"name\\\"\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\\\"Semi\\\"\"), \"\\uFF09\")))), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React, { useRef } from 'react';\\nimport { JsonViewer, Button, Rating, Popover, Tag, Image } from '@douyinfe/semi-ui';\\nconst data = `{\\n \\\"name\\\": \\\"Semi\\\",\\n \\\"version\\\": \\\"2.7.4\\\",\\n \\\"rating\\\": 5,\\n \\\"tags\\\": [\\\"design\\\", \\\"react\\\", \\\"ui\\\"],\\n \\\"image\\\": \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg\\\"\\n}`;\\nfunction CustomRenderJsonComponent() {\\n const jsonviewerRef = useRef();\\n const customRenderRule = [\\n {\\n match: 'Semi',\\n render: (content) => {\\n return {content};\\n }\\n },\\n {\\n match: (value)=> value == 5,\\n render: (content) => {\\n return ;\\n }\\n },\\n {\\n match: (value, path)=> path === 'root.tags[0]' || path === 'root.tags[1]' || path === 'root.tags[2]',\\n render: (content) => {\\n return {content};\\n }\\n },\\n {\\n match: new RegExp('^http'),\\n render: (content) => {\\n // content \\u4E3A\\u539F\\u59CB\\u5B57\\u7B26\\u4E32\\uFF0C\\u5305\\u542B\\u5F15\\u53F7,\\u56E0\\u6B64\\u9700\\u8981\\u53BB\\u9664\\u5F15\\u53F7\\u624D\\u53EF\\u4EE5\\u4F5C\\u4E3A\\u5408\\u6CD5\\u7684url\\n return } trigger='hover'>{content};\\n }\\n }\\n ];\\n return (\\n
\\n
\\n \\n
\\n
\\n );\\n}\\n\\nrender(CustomRenderJsonComponent);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u81EA\\u5B9A\\u4E49\\u641C\\u7D22\\u6309\\u94AE\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderSearchButton\"), \" \\u5C5E\\u6027\\uFF0C\\u4F60\\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u641C\\u7D22\\u6309\\u94AE\\u7684\\u6E32\\u67D3\\u65B9\\u5F0F\\uFF0C\\u5B9E\\u73B0\\u56FA\\u5B9A\\u4F4D\\u7F6E\\u3001\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\\u7B49\\u9700\\u6C42\\u3002\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React from 'react';\\nimport { JsonViewer, Button } from '@douyinfe/semi-ui';\\nimport { IconSearch } from '@douyinfe/semi-icons';\\n\\nconst data = `{\\n \\\"name\\\": \\\"Semi\\\",\\n \\\"version\\\": \\\"0.0.0\\\"\\n}`;\\n\\nfunction CustomSearchButtonDemo() {\\n return (\\n
\\n (\\n
\\n {!controls.showSearchBar ? (\\n \\n ) : (\\n defaultButton\\n )}\\n
\\n )}\\n />\\n
\\n );\\n}\\n\\nrender(CustomSearchButtonDemo);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"JsonViewer\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"value\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5C55\\u793A\\u5185\\u5BB9\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"height\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9AD8\\u5EA6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number \", \"|\", \" string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"width\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5BBD\\u5EA6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number \", \"|\", \" string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"className\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u540D\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"showSearch\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u662F\\u5426\\u663E\\u793A\\u641C\\u7D22Icon\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"limitSearchButtonBounds\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u662F\\u5426\\u9650\\u5236\\u641C\\u7D22\\u6309\\u94AE\\u62D6\\u52A8\\u8303\\u56F4\\u5728\\u5BB9\\u5668\\u5185 \", mdx(\"strong\", {\n parentName: \"td\"\n }, \">=2.94.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"renderSearchButton\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u641C\\u7D22\\u6309\\u94AE \", mdx(\"strong\", {\n parentName: \"td\"\n }, \">=2.95.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(defaultButton: ReactNode, controls: SearchControls) => ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"options\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7F16\\u8F91\\u5668\\u914D\\u7F6E\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"JsonViewerOptions\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onChange\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5185\\u5BB9\\u53D8\\u5316\\u56DE\\u8C03\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(value: string) => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"JsonViewerOptions\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"lineHeight\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u884C\\u9AD8\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"20\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"autoWrap\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u662F\\u5426\\u81EA\\u52A8\\u6362\\u884C\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"readOnly\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u662F\\u5426\\u53EA\\u8BFB\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"customRenderRule\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u89C4\\u5219\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CustomRenderRule[]\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.74.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"formatOptions\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u683C\\u5F0F\\u5316\\u914D\\u7F6E\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"FormattingOptions\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"CustomRenderRule\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"match\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5339\\u914D\\u89C4\\u5219\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string \", \"|\", \" RegExp \", \"|\", \" (value: string, path: string) => boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"render\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6E32\\u67D3\\u51FD\\u6570\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(content: string) => React.ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"FormattingOptions\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"tabSize\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7F29\\u8FDB\\u5927\\u5C0F\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"4\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"insertSpaces\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u662F\\u5426\\u4F7F\\u7528\\u7A7A\\u683C\\u8FDB\\u884C\\u7F29\\u8FDB\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"eol\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6362\\u884C\\u7B26\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'\\\\n'\")))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"SearchControls\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u5F53\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderSearchButton\"), \" \\u65F6\\uFF0C\\u7B2C\\u4E8C\\u4E2A\\u53C2\\u6570 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"controls\"), \" \\u5305\\u542B\\u4EE5\\u4E0B\\u5C5E\\u6027\\uFF1A\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u578B\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"showSearchBar\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5F53\\u524D\\u662F\\u5426\\u663E\\u793A\\u641C\\u7D22\\u680F\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onToggleSearchBar\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5207\\u6362\\u641C\\u7D22\\u680F\\u663E\\u793A/\\u9690\\u85CF\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => void\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onSearch\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6267\\u884C\\u641C\\u7D22\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(text: string, caseSensitive?: boolean, wholeWord?: boolean, regex?: boolean) => void\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onPrevSearch\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8DF3\\u8F6C\\u5230\\u4E0A\\u4E00\\u4E2A\\u641C\\u7D22\\u7ED3\\u679C\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => void\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onNextSearch\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8DF3\\u8F6C\\u5230\\u4E0B\\u4E00\\u4E2A\\u641C\\u7D22\\u7ED3\\u679C\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => void\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onReplace\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u66FF\\u6362\\u5F53\\u524D\\u641C\\u7D22\\u7ED3\\u679C\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(text: string) => void\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onReplaceAll\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u66FF\\u6362\\u6240\\u6709\\u641C\\u7D22\\u7ED3\\u679C\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(text: string) => void\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Methods\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ref\"), \" \\u8C03\\u7528\\u7EC4\\u4EF6\\u5B9E\\u4F8B\\u4E0A\\u7ED1\\u5B9A\\u7684\\u65B9\\u6CD5\\uFF0C\\u5B9E\\u73B0\\u67D0\\u4E9B\\u7279\\u6B8A\\u4EA4\\u4E92\\u3002\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u540D\\u79F0\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u63CF\\u8FF0\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"getValue()\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u83B7\\u53D6\\u5F53\\u524D\\u503C\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"format()\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u683C\\u5F0F\\u5316\\u5F53\\u524D\\u5185\\u5BB9\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"search(searchText: string, caseSensitive?: boolean, wholeWord?: boolean, regex?: boolean)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u641C\\u7D22\\u6587\\u672C\\uFF0C\\u53EF\\u9009\\u53C2\\u6570\\u63A7\\u5236\\u5927\\u5C0F\\u5199\\u654F\\u611F\\u3001\\u5168\\u8BCD\\u5339\\u914D\\u548C\\u6B63\\u5219\\u8868\\u8FBE\\u5F0F\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"getSearchResults()\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u83B7\\u53D6\\u5F53\\u524D\\u641C\\u7D22\\u7ED3\\u679C\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"prevSearch(step?: number)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5BFC\\u822A\\u5230\\u4E0A\\u4E00\\u4E2A\\u641C\\u7D22\\u7ED3\\u679C\\uFF0C\\u53EF\\u9009\\u6B65\\u957F\\u53C2\\u6570\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"nextSearch(step?: number)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5BFC\\u822A\\u5230\\u4E0B\\u4E00\\u4E2A\\u641C\\u7D22\\u7ED3\\u679C\\uFF0C\\u53EF\\u9009\\u6B65\\u957F\\u53C2\\u6570\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"replace(replaceText: string)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u66FF\\u6362\\u5F53\\u524D\\u641C\\u7D22\\u5339\\u914D\\u9879\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"replaceAll(replaceText: string)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u66FF\\u6362\\u6240\\u6709\\u641C\\u7D22\\u5339\\u914D\\u9879\")))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Performance\"), mdx(\"h4\", {\n parentName: \"section\"\n }, \"Bundle Size\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7EC4\\u4EF6\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u4F53\\u79EF\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u4F53\\u79EF(Gzip)\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"JsonViewer\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"203.14kb\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"51.23kb\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"MonacoEditor\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"5102.0 KB\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"1322.7 KB\")))), mdx(\"h4\", {\n parentName: \"section\"\n }, \"\\u6E32\\u67D3\\u4E0D\\u540C\\u91CF\\u7EA7\\u6570\\u636E\\u8017\\u65F6\"), mdx(\"blockquote\", {\n parentName: \"section\"\n }, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u6CE8\\uFF1A\"), mdx(\"ul\", {\n parentName: \"blockquote\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u6D4B\\u8BD5\\u6570\\u636E\\u751F\\u6210\\u65B9\\u5F0F\\u8BE6\\u60C5\\u53EF\\u67E5\\u9605 \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/DouyinFE/semi-design/blob/main/packages/semi-ui/jsonViewer/_story/jsonViewer.stories.jsx\"\n }, \"url\"), \" \"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5F53\\u6570\\u636E\\u91CF\\u7EA7\\u8D85\\u51FA50w\\u884C\\u65F6\\uFF0CReactMonacoEditor \\u9ED8\\u8BA4\\u5173\\u95ED\\u9AD8\\u4EAE\\u7B49\\u884C\\u4E3A\\uFF0C\\u6570\\u636E\\u5BF9\\u6BD4\\u4E0D\\u9075\\u5FAA\\u5355\\u4E00\\u53D8\\u91CF\\u539F\\u5219\"))), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7EC4\\u4EF6\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"1k\\u884C\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"5k\\u884C\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"1w\\u884C\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"10w\\u884C\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"50w\\u884C\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"100w\\u884C\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"300w\\u884C\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"JsonViewer\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"30.42ms\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"30.66ms\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"36.87ms\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"52.73ms\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"111.02ms\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"178.81ms\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"506.25ms\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactMonacoEditor\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"72.01ms\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"73.76ms\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"76.64ms\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"97.89ms\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"133.31ms\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"202.79ms\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"495.53ms\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6027\\u80FD\\u63D0\\u5347\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"57.70%\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"58.41%\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"51.87%\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"46.11%\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"))))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/plus/jsonviewer","next":{"fields":{"slug":"en-US/plus/hotkeys"},"id":"5ef428c9-044c-5e4b-8eb0-6e5129258e73","frontmatter":{"title":"HotKeys","localeCode":"en-US","icon":"doc-configprovider","showNew":null}},"previous":{"fields":{"slug":"en-US/plus/jsonviewer"},"id":"2b87f621-08ee-5aa8-ab3f-6ba7cdd70d68","frontmatter":{"title":"JsonViewer","localeCode":"en-US","icon":"doc-jsonviewer","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}