Javascript 如何在鼠标进入/离开事件时呈现React.Component

在项目列表中的

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

我有一份物品清单

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

---

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

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

函数ShowOnHover（{item}）{
const[isHover，setHover]=使用状态（false）；
返回(
setHover（true）}
onMouseLeave={（）=>setHover（false）}
>
{item.name}

{isHover&&}
);
}

然后将该组件用作：

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

data.categories.map（（项）=>）

您是否可以将变量添加到问题中，如

isHover

变量来自何处以及

setHover

函数