React - 擴展事件以包括兒童

Question

我對反應還很陌生，我在將鼠標離開事件擴展到呈現的子菜單時遇到了問題。

目前鼠標懸停在導航欄項目和子菜單呈現。 鼠標離開導航欄項目以從子菜單中選擇項目。 子菜單消失。 我希望子菜單在鼠標懸停在導航項上並位於子菜單內時保持打開狀態。 在這一點上，我已經嘗試了多種不同的方法，但我正在努力理解如何制作一些可行的條件邏輯。

這是渲染孩子的功能。

function NavItem(props) {
  const [open, setOpen] = useState(false)
  return (
    <li className='nav-item'>
      <p1 className='icon-button' onMouseEnter={() => setOpen(!open)} onMouseLeave={() => setOpen(false)}>
        {props.name}
      </p1>
      {open && props.children}    
    </li> 
  )
}

這是子函數。

function PlatformMenu() {
  return (
    <div className='dropdown' >
      <li>
        <ul className='dropdown-item' ><a href='#'>Sub-Menu Item</a></ul>
      </li>
    </div>
  )
}

Answer 1

將子菜單放入您的 p1 中，例如：

 <li className='nav-item'>
      <p1 className='icon-button' onMouseEnter={() => setOpen(!open)} 
           onMouseLeave={() => setOpen(false)}>
        {props.name}
        {open && props.children}    
      </p1>
    </li> 

ps：我會在評論中加入答案，我不建議你為此任務使用狀態，最好使用CSS樣式。