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} />}
  </>
))}

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

li

我看到<ul> <li> ... isHover && <SubCategory> <li> <ul>显示了<SubCategory>次，但我只需要显示一个 items.length就可以仅悬停<SubCategory>

Expected result is how on the Walmart site subcategories shown

Answer 1

换句话说，每个元素都需要一个不同的 state ，因此每个元素还需要一个Component：

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} />)

如何在鼠标进入/离开事件时渲染React.Component

1 个答案: