仿网站,wordpress 整合ckplayer,网站建设网站管理,wordpress 适配前言 JSON 平时大家都会用到#xff0c;都不陌生#xff0c;今天就一起来实现一个 JSON 的可视化工具。 大概长成下面的样子#xff1a; 树展示 相比于现有的一些 JSON 格式化工具#xff0c;我们今天制作的这个小工具会把 JSON 转为树去表示。其中#xff1a; 橙色标…前言 JSON 平时大家都会用到都不陌生今天就一起来实现一个 JSON 的可视化工具。 大概长成下面的样子 树展示 相比于现有的一些 JSON 格式化工具我们今天制作的这个小工具会把 JSON 转为树去表示。其中 橙色标签表示 key蓝色标签表示 value绿色标签表示类型 Number String Object Array Null 左边是一个输入框右边是一个实时反馈的 JSON 可视化区域。下面来看一下大致的实现思路 当输入框的值变化时使用 JSON.parse 解析值如果是一个合法的 JSON 则进行下一步处理如果不是则把异常显示出来递归把 JSON 对象解析成数组树的结构主要会包含以下几个 key key 唯一标识后续用做复制路径title JSON 属性节点 keyvalue JSON 属性节点值isArrayProps 是否是数组的节点children 子节点type 值类型 const handleParse useCallback(debounce((value) {if (!value) {return;}try {const res JSON.parse(value);setJson(res);setError(null);setUpdateKey((key) key 1);setSearchValue();} catch (error) {setJson({});setError(error);}}, 300),[]);useEffect(() {handleParse(value);}, [value]);value 是输入框的输入值当输入值变化时解析 JSON 。获取到新的 JSON 值后开始递归处理组装成树结构 const treeData useMemo(() {const dfs (json, parentKey) {const res [];const keys Object.keys(json);for (const index in keys) {const key keys[index];const value json[key];res[index] {key: parentKey ? [${parentKey}][${key}] : [${key}],title: key,value: value ? value.toString() : value,isArrayProps: Array.isArray(json),children:typeof value object value ! null ? dfs(value, key) : [],type: upperFirst(value null? null: Array.isArray(value)? array: typeof value),};}return res;};try {return dfs(json, );} catch (error) {console.log(err, error);return [];}}, [json]);然后用一个树组件把它渲染出来 TreeshowIconshowLinetitleRender{renderTitle}key{updateKey}treeData{treeData}defaultExpandAll /其中我们希望自定义渲染树的每一个节点所以可以实现一个 titleRender 方法 const renderTitle (node) {return (div onClick{() copy}{!node.isArrayProps ? Tag colororange{node.title}/Tag : }{node.children.length 0 node.value ? (Tag colorblue{node.value}/Tag) : ()}Tag colorgreen{node.type}/Tag/div);}; 这样就完成了基础的功能逻辑及渲染 搜索 这里我们拓展一个根据关键词搜索的功能既可以搜索 key 也可以搜索 value 。 用到一个 Search 组件来搜集 keyword 。 Input.Searchstyle{{ marginBottom: 8 }}placeholderSearchonChange{(e) setSearchValue(e.target.value)} /然后当 keyword 变化的时候去匹配树节点中的属性值如果匹配到了就把对应的值标红。 const renderTitle (node) {const highlight (strTitle) {const index strTitle.indexOf(searchValue);const beforeStr strTitle.substring(0, index);const afterStr strTitle.slice(index searchValue.length);const title index -1 ? (span{beforeStr}span style{{ color: red }}{searchValue}/span{afterStr}/span) : (span{strTitle}/span);return title;};return (div onClick{() copy}{!node.isArrayProps ? (Tag colororange{highlight(node.title)}/Tag) : ()}{node.children.length 0 node.value ? (Tag colorblue{highlight(node.value)}/Tag) : ()}Tag colorgreen{node.type}/Tag/div);};最后实现出来的效果就是这样的 复制路径 我不知道大伙有过这样类似的需求改动一个 json 对象某个 key 对应的值。我之前是有过这样的场景那是在使用 Lottie 做动画的时候。 我需要对描述 Lottie 动画的 json 文件进行一些修改但往往这种文件层级非常深如果不借助一些工具是很难找到对应的值的路径是什么找不到路径就很难修改了。 那么我们有了这个工具之后就很轻松可以通过搜索复制的方式来找到某个值对应的路径。 Clipboard text{node.key} onCopy{() message.success(路径已复制)}div{!node.isArrayProps ? (Tag colororange{highlight(node.title)}/Tag) : ()}{node.children.length 0 node.value ? (Tag colorblue{highlight(node.value)}/Tag) : ()}Tag colorgreen{node.type}/Tag/div /Clipboard用一个复制组件包裹树节点点击的时候把节点的 key 属性复制到粘贴板。 这样就可以轻松获取到节点所对应的 key 了。 最后 以上就是本文的全部内容如果你感兴趣的话点点关注点点赞吧