Блог

У меня есть список динамически отображаемых заголовков, и я хочу отображать изображение при наведении указателя мыши на каждый заголовок. Когда я наведу курсор на заголовок, отобразятся все изображения. Я все еще новичок в React. Я думаю, что решение простое, но я его не нахожу.

Component.js

 import React, { useEffect, useRef } from "react";
import { Row, Col } from "react-bootstrap"
import Link from "next/link";
import gsap from "gsap";
import { getStrapiMedia } from "../lib/media";


const Articles = ({ articles }) => {

  const itemsRef = useRef({});

  const handleHover = (e) => {
    gsap.to(".imgHome", {
      display: "block"
    })
  }

  const handleHoverExit = (e) => {
    gsap.to(".imgHome", {
      display: "none"
    })
  }

  return (
    <div>
      <div className="tableau">
            {articles.map((item) => (
              <Row key={item.id}
                onMouseEnter={(e) => handleHover(e)}
                onMouseOut={(e) => handleHoverExit(e)}
                ref={el => (itemsRef.current[item.id] = el)}>
                <Link href={`/article/${item.id}`}>
                  <a className="titre"
                  >{item.title} </a>
                </Link>
                <img className="imgHome" src={getStrapiMedia(item.image.url)}
                  width="800" />
              </Row>
            ))}
      </div>
    </div>
  )
}

export default Articles
 

Вы можете использовать ref s для <img> элементов, а затем ссылаться на них в gsap.to вызове функции, а не использовать .imgHome класс.

 const Articles = ({ articles }) => {
    const imagesRef = useRef({});

    const handleHover = (e, id) => {
        gsap.to(imagesRef.current[id], { display: "block" })
    }

    const handleHoverExit = (e, id) => {
        gsap.to(imagesRef.current[id], { display: "none" })
    }

    return (
        <div>
            <div className="tableau">
                {articles.map((item) => (
                    <Row key={item.id}
                        onMouseEnter={(e) => handleHover(e, item.id)}
                        onMouseOut={(e) => handleHoverExit(e, item.id)}
                    >
                        <Link href={`/article/${item.id}`}>
                            <a className="titre">{item.title} </a>
                        </Link>
                        <img 
                            ref={(el) => (imagesRef.current[item.id] = el)} 
                            className="imgHome" 
                            src={getStrapiMedia(item.image.url)} 
                            width="800" 
                        />
                    </Row>
                ))}
            </div>
        </div>
    )
}