React/Cordova应用<a>嵌套触发validateDOMNesting警告如何解决

方案1：事件冒泡拦截+JS跳转实现（最易落地） #

完全弃用外层<Link>标签，将卡片根元素改为普通<div>，通过JS路由跳转实现卡片点击跳转逻辑，同时给Dropdown的点击事件添加冒泡拦截，避免点击Dropdown时触发卡片跳转。
示例代码：

import { useNavigate } from 'react-router-dom'

const GroupCard = () => {
  const navigate = useNavigate()
  // 卡片整体点击跳转
  const handleCardClick = () => {
    navigate('/group/manage/')
  }
  // Dropdown点击拦截冒泡
  const handleDropdownClick = (e) => {
    e.stopPropagation()
  }

  return (
    <div onClick={handleCardClick} style={{ cursor: 'pointer' }}>
      {/* 卡片其他内容 */}
      <div onClick={handleDropdownClick}>
        {/* 你的Dropdown组件 */}
        <Dropdown />
      </div>
    </div>
  )
}

方案2：平级元素层级叠加实现（无事件处理成本） #

将卡片容器设置为position: relative，把跳转链接和Dropdown组件设置为平级，不存在嵌套关系：

• 跳转<Link>设置为position: absolute，宽高100%，z-index: 1，铺满整个卡片区域实现整体点击跳转
• Dropdown容器设置为position: relative，z-index: 2，层级高于跳转链接，点击时不会触发外层跳转
  示例代码：

import { Link } from 'react-router-dom'

const GroupCard = () => {
  return (
    <div style={{ position: 'relative' }}>
      <Link 
        to="/group/manage/"
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          zIndex: 1
        }}
      />
      {/* 卡片其他内容 */}
      <div style={{ position: 'relative', zIndex: 2 }}>
        {/* 你的Dropdown组件 */}
        <Dropdown />
      </div>
    </div>
  )
}

注意事项 #

• 不要通过HTML注释、CSS隐藏等方式规避嵌套警告，不符合HTML语义规范，会导致屏幕阅读器等无障碍工具识别错误
• 两种方案均符合HTML规范，不会触发validateDOMNesting警告，且不影响原有交互逻辑

内容的提问来源于stack exchange，提问作者Paraic Mcdonagh