Punya masalah dengan rendering komponen reaksi pada peristiwa onMouseEnter, onMouseLeave dalam daftar item

Saya memiliki daftar item

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

Perlu menunjukkan SubCategory Component with different data pada acara onMouseLeave / onMouseEnter di setiap li
Jika saya melakukan sesuatu seperti ini

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

Saya melihat bahwa <SubCategory> ditampilkan items.length kali tetapi saya hanya perlu menampilkan satu <SubCategory> untuk mengarahkan li saja

Hasil yang diharapkan adalah bagaimana subkategori situs Walmart ditampilkan

0
sliim35 31 Maret 2019, 16:21

1 menjawab

Jawaban Terbaik

Dengan kata lain, Anda memerlukan status yang berbeda untuk setiap elemen, oleh karena itu Anda juga memerlukan Komponen untuk masing-masing:

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

Kemudian gunakan komponen itu sebagai:

data.categories.map((item) => <ShowOnHover item={item} />)
1
Jonas Wilms 31 Maret 2019, 13:26