Блог

Главная - Вопросы по программированию - Как я могу передать параметр прослушивателю событий в react

Как я могу передать параметр прослушивателю событий в react

#javascript #reactjs #react-hooks

#javascript #reactjs #реагирующие хуки

Вопрос:

У меня есть такой компонент:

 import React, { useEffect } from 'react';

const WindowFocusHandler = ({store}) => {
  // here store object is valid and work
  useEffect(() => {
    window.addEventListener('focus', () => {
      console.log('Tab is in focus... but no store object here', store);
    
    });
  });

  return <></>;
};

export default WindowFocusHandler;

И я пытаюсь передать store объект внутри функции прослушивателя, но не смог, что бы я ни пытался.

Комментарии:

1. Вы передали хранилище в WindowFocusHandler?

2. store наверняка находится в области видимости и доступен изнутри эффекта. Проблема должна быть в вызове компонента. Это не проблема области видимости, объект уже обнуляется

3. Компонент добавляется в корень приложения <WindowFocusHandler store={store}/> . Если я попытаюсь (store) => ... , я получу событие window, а не мое хранилище, которое я передал

Ответ №1:

Попробуйте это:

 import React, { useEffect } from 'react';

const WindowFocusHandler = ({ store }) => {
  useEffect(() => {
    const fn = () => {
      console.log('Tab is in focus...', store);
    };

    window.addEventListener('focus', fn);
    return () => window.removeEventListener('focus', fn);
  }, [store]);

  return <></>;
};

export default WindowFocusHandler;

Комментарии:

1. Эффект использования зависит от fn и не зависит от store . Вы можете создать fn внутри useEffect. Или оберните fn с помощью useCallback с помощью dep [store] и измените dep на useEffect [fn].

2. Да, хороший вызов. Я отредактировал свой ответ. Спасибо, что присмотрелись!