为何Ant Design Menu写法变更后消除validateDOMNesting警告？

问题场景 #

使用Ant Design的Menu组件时，初始代码写法如下：

<Menu
  mode="horizontal"
  items={
    menuState &&
    menuState?.map((valueMenus, index) => {
      const key = index + 1;
      const items = valueMenus.menusInferiores;

      return {
        key,
        label: (
          <div>
            {valueMenus.menu} <DownOutlined />
          </div>
        ),
        children: items.map((item) => {
          return {
            label: <NavLink to={item.key}>{labelName}</NavLink>,
            key: item.key,
          };
        }),
      };
    })
  }
/>;

此时控制台出现validateDOMNesting警告。

修改后的代码如下，警告消失且功能正常：

children: items.map((item) => {
  const labelName = item.label;
  //DONE:Cambiar la ruta quemada por la ruta que nos envian del bk
  item.label = <NavLink to={item.key}>{labelName}</NavLink>;
  return {
    label: <div>{labelName}</div>,
    key: item.key,
  };
});

原因分析 #

这个警告的核心是非法DOM嵌套：

• 初始代码中，你将NavLink（本质是HTML的<a>标签）直接作为Menu子项的label值。而Ant Design的Menu组件在渲染导航类菜单项时，会自动为每个子项包裹一层原生<a>标签用于交互，最终生成的DOM结构会出现<a><a>...</a></a>的嵌套。
• HTML规范明确禁止<a>标签嵌套其他可交互的<a>标签，这会导致浏览器解析混乱、交互行为冲突，因此React抛出validateDOMNesting警告。

修改后的代码解决了这个问题：

• 返回给Menu的label改为仅包含纯文本的<div>，不再嵌套<a>标签，避免了和Menu自动生成的<a>标签产生嵌套冲突。
• 你将NavLink赋值给item.label的操作，应该是通过其他逻辑（比如Menu的点击事件）实现路由跳转，既保留了导航功能，又消除了非法DOM嵌套的问题，因此警告消失。

内容的提问来源于stack exchange，提问作者ANDERSON AUGUSTO NAVARRO BARON