Реагировать на события DOM в компонентах

Я хотел показать или скрыть небольшую панель в зависимости от состояния наведения мыши.

Когда я наводил ссылку, появлялась панель.

Затем я мог войти в эту панель с помощью мыши, и когда я убирал мышь, панель скрывалась.

Например, профиль в Твиттере, который отображается, когда вы наводите курсор мыши на имя человека:

в элементе, который вызвал появление панели, я добавил событие OnMouseEnter:

 {
    setShowCard(true)
  }}
>flavio

таким образом, панель будет отображаться, когда я наведу на нее курсор мыши, потому что она отображалась в зависимости от переменной состояния showCard , которую я установил ранее:

const [showCard, setShowCard] = useState(false)

Затем у меня был компонент Карточка профиля но я не мог просто сделать:

 {
  setShowCard(true)
}}
onMouseLeave={() => {
  setShowCard(false)
}}
/>

потому что это не сработало. Карточка профиля не является элементом DOM, поэтому она не вызывала события, на которые нужно было реагировать.

Что мне нужно было сделать, так это пройти OnMouseEnter онМоузеЕнтер//и На мышеловке в качестве реквизита для компонента Карточка профиля , затем определите внутри него правильный элемент DOM, который мог бы получать эти события, и прикрепите к нему обработчик событий. В этом случае я использовал контейнер div

const ProfileCard = ({
  onMouseEnter,
  onMouseLeave
}) => (     
  

      ...

Теперь уход с панели скроет это.

Оригинал: “https://flaviocopes.com/react-dom-events-components/”