相对按钮包含带有按钮的模态，它会导致 validateDOMNesting(...): <button> 不能显示为 <button>

Question

我有一个按钮，看起来像 3 个点，可以用另外 2 个按钮打开模式。 我应该把这个 3 点按钮变成

div

吗？使代码在语义上正确的最佳决定是什么？

jsx 文件：

<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>
  {modal 
    ||
  <div className="reservations-item-modal">
    <button style={{background:'none', border:'none'}}>
      Edit
    </button>
    <button style={{background: 'none', border: 'none'}}>
      Delete
    </button>
  </div>
  }
</button>

CSS文件：

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

.reservations-item-modal {
    /*border: 1px solid rgb(255, 199, 0);*/
    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;
}

Answer 1

请尝试以下代码：

enter code here

Shobana：编程有意义

<button 
  className="reservations-item-button" 
  onClick={() => setModal(s => !s)} 
  style={{background: 'none', border: 'none'}}
  aria-label="Open options">
  <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>