2023年6月22日发(作者：)

关于antd@4之后tree树形控件不能横向排列这件事遇到这个问题，⾸先还是搜⼀下，搜到了相关官⽅的 issues，如下链接：在 17 年就有⼈提及需要⽀持横向排列，因为这个树形如果按照竖向的话，数据⼀多了，就显得很长。当时好像就没有解决这个问题，也看了 antd 之前的版本发现都没有这个配置项，不过倒是找到了相关实现⽅式，如下链接：其实就是通过修改样式来做，有了这个思路，我也打算对最新版的 antd 操作⼀番，不过发现 dom 结构已经变了，不像是之前有 ul li 这种结构了，最底层的 child 节点们外层没有包裹的元素，每⼀个都是单独的 div。此时，how to gao?到底怎么搞？…开始寻找于是，开始了两天的各种尝试，⽐如说，看到了这篇博客：BFS 和 DFS我也想着应该也可以⾃定义渲染树，当时还画了⼀张草图，准备动⽤⼀些算法，如下图：想着对于 ReactNode 来说必须要嵌套才⾏，所以单纯对于树结构 BFS 不太⾏，感觉还是得要递归才⾏，⼜想到了 DFS，但是这个遍历⽅式不⼀样，我⼜画了⼀张草图：感觉这像是 BFS 和 DFS 结合？所以我还是得判断⼀下当前节点有没有孩⼦节点，如果有的话就递归下去，并且当前节点也要显⽰，于是就有了下⾯⼤概的伪代码，核⼼部分就是这个，也是⽤的之前 antd@3 的⽅式，拿出了 TreeNode，不过在 antd@4 之后使⽤控制台会有提醒不建议使⽤，推荐使⽤treeData。82936373839404142import { Tree } from 'antd';const { TreeNode } = Tree;// const data = [...];//

核⼼部分const renderTree = (data: any) => { if (data && && data[0].children) { return ((item: any) => { return ( {en && renderTree(en)} ); }); } else { return ( {((item: any) => { return ( ); })} ); }};const Test = () => { return ( {renderTree(data)} )}export xxx;我以为这种⽅式完美解决了，当时思路也很清晰，就是判断没有孩⼦节点的情况，那时候我可以获得上⼀个节点的所有孩⼦节点，把这些孩⼦节点包在⼀个 div ⾥⾯，然后给这个 div 加⼀个 flex 就完美解决问题。可是！如果给 TreeNode 包裹⼀个 div 居然就失效了…孩⼦节点不会渲染，包括这个 div，试了好⼏次还是不⾏，于是这个⽅案放弃了。安装两个版本这个是我突发奇想，我想着既然 antd@3 过去可以通过样式来解决横向排列问题，那么是不是我可以安装两个 antd 版本来解决，当时就搜到了这篇博客，链接如下：我在 codesandbox 中尝试了⼀下，会有样式问题，毕竟现在版本和之前版本 dom 结构都不⼀样了，所以如果之前全局导⼊了 antd@4的样式，对于我这个 antd@3 版本的就不太⾏了。当时也搜到了这篇博客：还要改前缀，对当时的我来说还是感觉些许⿇烦，还是放弃了这个⽅式，毕竟共存组件两个版本也不太好，毕竟我不是旧版本升级新版本，我新的⼜继续往⽼的兼容感觉有点反调了，想想还是得再找找⽅式。⾃定义渲染节点后续⼜翻阅了⽂档，基本上把每个字段都阅读了⼀遍，后⾯发现了 titleRender 这个配置项，于是查阅了⼀些使⽤，找了⼀篇博客样例，如下：titleRender ⾃定义渲染节点 (nodeData) => ReactNode不过这个好像并不能解决我的问题，我是想把没有孩⼦节点的所有⼦节点包括在⼀起，然后加个样式，这个遍历得到的每⼀个节点，也许是⾃⼰使⽤⽅式不对，折腾了⼀会还是没搞出来于是放弃这个⽅式了。寻找 npm 包我想应该会有和我⼀样需求的⼈吧，于是我去 npm 去搜索了⼀些关于 antd tree，我安装了⼀些，不过好像都没解决这个问题，难道真要我⾃⼰⼿写⼀个了？别吧，⽩嫖多⾹…尝试更新 UI期间我看了⼀下 material-ui 以及 antd-pro 是否可以，但是 material-ui 风格和国内还是有点区别，⽽产品的原型⼜是根据 antd 来的，带有 checkbox，⽽且⼀些选中和部分选中情况，material-ui ⼜没有，所以不考虑了。这时候，我不知道咋的⼀下就想到了 vue，⽽ vue 我当时学习时候就⽤过 element-ui，好家伙，我⽴马打开了官⽹，搜了⼀下 Tree，好家伙，好家伙，UI 风格居然没多⼤差别。我⼜⽼规矩 F12 看看元素是怎样的，先在浏览器端改改样式，我发现居然可以！既然之前还想着 UI 共存两个版本了，那么共存两个 UI ⼜多⼤回事呢是吧（逃）不过为了满⾜这个特定的需求，不得不妥协加⼊两个 UI 库，其实也还好，不⽤担⼼样式问题，element-ui 样式前缀都会有⼀个 el。不过，这时候⼀想这不是 Vue 的嘛， React 能⾏嘛，翻了翻，诶，找到了 element-react，在 codesandbox 上写了⼀个 demo，地址放在这吧：实现效果如下：算是解决了这个问题吧。总结怎么说呢，最后还是跳出来了，没有⼀直卡在问题⾥⾯，但可能不是⼀种⽐较好的解决⽅式？⾄于在⼤的版本切换之时，将原本的渲染结构重构了⼀遍这个过程，不太清楚 ul li 结构变成全 div 是为了考虑啥？ 性能⽅⾯嘛？之前好像在官⽅⽂档哪块地⽅看到过，不过既然改都改了，那么对于这个业务需求暂时就这样解决了。在此记录⼀下⾃⼰的解决⽅案，毕竟都换了 UI 库了，不知道各位有没有更好的解决⽅式，愿意⼀起探讨。学如逆⽔⾏⾈，不进则退。