按钮嵌套DOM验证错误：三点触发按钮改为div是否符合语义规范？

错误原因 #

你遇到的validateDOMNesting(...): <button> cannot appear as a descendant of <button>错误，是因为HTML规范明确禁止<button>元素嵌套其他<button>元素。你的代码里外层的三点按钮<button>直接包含了模态框中的两个<button>，违反了这个规则。

是否要改成<div>？ #

不建议直接把三点按钮改成<div>。<div>是无语义的通用容器，屏幕阅读器等辅助设备无法识别它是可交互的按钮，会损害页面的可访问性。我们可以通过调整DOM结构来解决问题，同时保留按钮的语义。

修复方案 #

核心思路是把模态框移出外层按钮的范围，利用CSS的绝对定位保持模态框相对于三点按钮的位置，这样既避免了嵌套错误，又保留了按钮的语义：

修改后的JSX代码：

<div className="reservations-item-button-wrapper">
  <button 
    className="reservations-item-button" 
    onClick={()=>setModal(s=>!s)} 
    style={{background:'none', border:'none'}}
  >
    <svg style={{margin: "auto 0"}} xmlns="http://www.w3.org/2000/svg"
         width="30" height="6" viewBox="0 0 30 6" fill="none">
      <circle cx="3"  cy="3" r="3" fill="#EDEFEE"/>
      <circle cx="15" cy="3" r="3" fill="#EDEFEE"/>
      <circle cx="27" cy="3" r="3" fill="#EDEFEE"/>
    </svg>
  </button>
  {modal && (
    <div className="reservations-item-modal">
      <button style={{background:'none', border:'none'}}>
        Edit
      </button>
      <button style={{background: 'none', border: 'none'}}>
        Delete
      </button>
    </div>
  )}
</div>

对应的CSS调整（新增容器的相对定位，原按钮样式保留）：

.reservations-item-button-wrapper {
  position: relative; /* 作为模态框的定位父元素 */
  display: inline-block; /* 避免容器占满整行 */
}

.reservations-item-button{
    position: relative;
}

.reservations-item-modal {
    background-color: #51724B;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: end;
    position:absolute;
    top:18px;
    right:0px;
}

.reservations-item-modal button{
    color:#EDEFEE;
}

调整说明 #

1. 新增外层容器.reservations-item-button-wrapper，设置position: relative作为模态框的定位参照，替代原按钮的相对定位
2. 将模态框移到容器内与按钮同级，彻底避免button嵌套button的问题
3. 保留外层<button>元素，保证语义化和可访问性
4. 模态框显示逻辑从||改为&&，更符合React条件渲染的习惯，避免modal为false时渲染空内容

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