Ant Design Menu 组件的使用与深入

1. 需求

最近项目中要修改原有的菜单,项目UI为antd,antd的导航菜单长这样:

menu

看着挺好的,完美对齐,但是当把我的菜单文案填入之后发现:

my-menu

左右不对齐,这也太丑了吧,这要是放任不管要被怼的。

2. 排查问题

开始审查元素,先查看官方demo正常能对齐的样式:

submenu

再看下我的demo不能对齐的样式:

my-submenu

发现我的菜单里少了一个 min-width ,也就是说antd在某一步给官方的demo添加了style属性,而没有给我的菜单添加。

为什么不给我的加！！！?

直接来吧,先来一个MutationObserver,详情看MDN文档。

你是不是想在 antd 给那个 ul 标签添加 style="min-width" 的时候告诉你一下？甚至能打个断点来调试下,但不知道怎么操作？直接上代码:

var ele = document.getElementById('item_2$Menu')   // 先找出该元素
var config = {attributes: true, attributeFilter: ['style']}
var callback = function (mutationsList) {
  console.log(mutationsList)
}
var observer = new window.MutationObserver(callback)
observer.observe(ele, config)

上面这段代码就是说,在 item_2$Menu 的 style 属性发生变化的时候,打印下 mutationsList 。于是在我将鼠标移入菜单的时候,打印了以下内容:

mutation

这有什么用呢？别急,说明鼠标移入,会执行到这里的代码,那么,不如打个断点？

chrome-breakpoint

鼠标移入时,浏览器停在了断点上,右边的 call stack 调用栈显示正在执行 callback 函数,看它的下面 adjustWith ,也就是说代码先执行 adjustWith ,然后触发了我们的断点。我们接着点开 adjustWith ,发现以下代码:

adjust-width

看来就是这段代码导致的。在浏览器中查看不方便,都是编译之后的代码,转战 Vscode ,查看我们的node_modules目录,先找到这个文件 node-modules/rc-menu/es/SubMenu.js 的 adjustWidth 方法:

this.adjustWidth = function () {
  /* istanbul ignore if */
  if (!_this3.subMenuTitle || !_this3.menuInstance) {
    return;
  }
  var popupMenu = ReactDOM.findDOMNode(_this3.menuInstance);
  if (popupMenu.offsetWidth >= _this3.subMenuTitle.offsetWidth) {
    return;
  }

  /* istanbul ignore next */
  popupMenu.style.minWidth = _this3.subMenuTitle.offsetWidth + 'px';
};

原来它会先判断宽度,如果 popupMenu 的宽度大于父级的 Title 宽度,就会直接返回,小于的时候才会加上 min-width 属性。

这么费劲总算找到了！

但是,找到了然后呢？问题是我咋去对齐？既然文案长度不一致,那么居中对齐好了。

3. 解决

继续查看 antd 的文档,看看有没有什么参数方法遗漏了,发现个Menu文档小角落有个 More options in rc-menu ,点进去之后发现了一片更广阔的世界 ( 其实我之前就问过同事知道antd还依赖于 react-component ,这个库才是antd组件具体的实现 ) 。

经过一番查找,找到一个props叫做 builtinPlacements 很可疑,描述是 Describes how the popup menus should be positioned(描述popup的菜单如何被定位) ,参数为 dom-align 的配置对象,继续查看 dom-align 的 介绍 发现这就是一个处理定位的小库,处理 domA(sourceNode) 和 domB(targetNode) 的位置关系:

const alignConfig = {
  points: ['tl', 'tr'],        // align top left point of sourceNode with top right point of targetNode
  offset: [10, 20],            // the offset sourceNode by 10px in x and 20px in y,
  targetOffset: ['30%','40%'], // the offset targetNode by 30% of targetNode width in x and 40% of targetNode height in y,
  overflow: { adjustX: true, adjustY: true }, // auto adjust position when sourceNode is overflowed
};

domAlign(domA, domB, alignConfig);

这样,就能让domA的 左上角(tl) 和domB的 右上角(tr) 对齐。直觉告诉我 builtinPlacements 属性能解决我的对齐问题。

接下来继续调试,先介绍个调试工具 (同事告诉我的) 。想想,之前我要调试前端代码都是一堆的 console.log ,要么在浏览器 source 中打断点调试,也可以调试 node_modules 里面的代码(也是从同事那里学来的),但是缺点是代码都是被编译打包过的,可读性不好。于是有 Vscode 的插件 Debugger for Chrome,有了这个插件之后,可以直接在 Vscode 里面给前端js代码打断点！。

接下来可能比较跳跃:

直接找到node_modules下的 rc-menu/es/submenu 目录,就是react-component下的menu组件。先搜索文件夹内搜索 builtinPlacements 这个词,看下哪几个地方用到了。发现如下:

1. rc-menu/es/submenu.js

   ...
   var builtinPlacements = props.builtinPlacements;
   ...
   React.createElement(
    Trigger,
    {
        ...
        builtinPlacements: _extends({}, placements, builtinPlacements),
        ...
    }

   原来Submenu拿到传入的 builtinPlacements 用来创建 Trigger 了,继续找 Trigger 发现:

2. rc-trigger/es/index.js

   ``` Trigger.prototype.getPopupAlign = function getPopupAlign() { ... var builtinPlacements = props.builtinPlacements; ... return getAlignFromPlacement(builtinPlacements, popupPlacement, popupAlign) };

... var align = _this5.getPopupAlign(); ... return React.createElement( Popup, _extends({ align: align, }) )

得,又拿来创建 `Popup` 了,不过先记住这个函数 
`getAlignFromPlacement(builtinPlacements, prefixCls, align, alignPoint)`:  

3. *rc-trigger/es/Popup.js*

import Align from 'rc-align'; ... React.createElement( Align, { ... align: align ... }, }

拿去创建 `Align` 了:  

4. *rc-align/es/Align.js*

import { alignElement, alignPoint } from 'dom-align'; // 你总算出来了 ...

var align = _this$props.align ... if (element) { result = alignElement(source, element, align); } else if (point) { result = alignPoint(source, point, align); } ...

所以大概关系是 `Antd Menu` => `rc-menu` => `rc-trigger` => `rc-align` => `dom-align`  ...  

其中你在 `Menu` 传入的 `builtinPlacements` 参数,会在rc-trigger中被当做参数传入 `getAlignPopupClassName(builtinPlacements, prefixCls, align, alignPoint)` ,得到的结果最终会被传入到 `dom-align` 的 `alignElement` 或者 `alignPoint` 中。  

但是 `builtinPlacements` 这个参数怎么传值呢？  

5. *function getAlignFromPlacement()*  

![](static/align-placement.png)  

也就是说我们需要传入类似这样的对象:

builtinPlacements: { bottomLeft: { // alignConfig对象 points: ['tl', 'tr'], offset: [10, 20], ... }, leftTop: { ... } }

并且可知: getAlignFromPlacement(builtinPlacements, placementStr, align) 中的 `placementStr` 此时为 `bottomLeft` ,所以我们的Menu变成了:

{this.renderMenuItems(menuItems)}

至于 `placementStr` 的值 `bottomLeft` ,其实是:  

*rc-menu/es/SubMenu.js*

var popupPlacementMap = { horizontal: 'bottomLeft', vertical: 'rightTop', 'vertical-left': 'rightTop', 'vertical-right': 'leftTop' };

var popupPlacement = popupPlacementMap[props.mode]; // 这个值最终作为"placementStr"的值,水平菜单Menu的"mode"为"horizontal"时,"placementStr"即为"bottomLeft"。

`` bottomLeft,rightTop` 的具体位置图我猜可以参考Antd的 Popconfirm。

最终效果图:

iamwinner

4. 总结

本文针对工作中的遇到的一个菜单组件对齐问题,粗略讲到了调试思路,antd组件结构,dom-align, MutationObserver 和 Debuggr for Chrome插件,涉及代码并不复杂, 希望读者看完能有些许收获。

感谢我那些无所不知的同事们。