如何在鼠标 enter/leave 事件上呈现 React.Component

Question

在项目列表

中的 onMouseEnter、onMouseLeave 事件上呈现 React 组件时出现问题

我有一个项目列表

const [isHover, setHover] = useState(false)
...
{data.categories.map((item) => (
  <>
    <li
      key={item.id}
      className="list-item"
      onMouseEnter={() => {
        setHover(true);
      }}
      onMouseLeave={() => {
        setHover(false);
      }}
    >
      <NavLink
        to={`/catalogues/${item.name_parameterized}`}
        className="list-item-link"
        activeClassName="active"
      >
        {item.name}
      </NavLink>
    </li>
    {isHover && <SubCategory data={item.children} />}
  </>
))}

需要在每个 li
的 onMouseLeave / onMouseEnter 事件中显示 SubCategory Component with different data 如果我这样做

<ul>
<li>
...
isHover && <SubCategory>
<li>
<ul>

我看到 <SubCategory> 显示 items.length 次，但我只需要显示一次 <SubCategory> 仅用于悬停 li

Expected result is how on the Walmart site subcategories shown

Answer 1

换句话说，每个元素需要一个不同的状态，因此每个元素还需要一个组件：

function ShowOnHover({ item }) {
  const [isHover, setHover] = useState(false);

  return (
   <>
     <li
      key={item.id}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
     >
     <NavLink
      to={`/catalogues/${item.name_parameterized}`}
      className="list-item-link"
      activeClassName="active"
     >
      {item.name}
     </NavLink>
    </li>
    {isHover && <SubCategory data={item.children} />}
    </>
   );
}

然后将该组件用作：

data.categories.map((item) => <ShowOnHover item={item} />)

如何在鼠标 enter/leave 事件上呈现 React.Component

How to render React.Component on mouse enter/leave events

javascript

arrays

reactjs

mouseevent