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

0
user12051965 5 Апр 2021 в 22:36

1 ответ

Лучший ответ

useRef вернет согласованный объект . Это никогда не будет null или undefined.

Что изменится, так это свойство .current ссылки - это то, что вы должны проверить, а не сам объект ссылки.

if (domNodeRef !== undefined || domNodeRef !== null) {

Следует изменить на

if (domNodeRef.current) {

Также

return () => {
  document.addEventListener("mousedown", handler);
};

Должно быть

return () => {
  document.removeEventListener("mousedown", handler);
};

Однако вы можете рассмотреть другой подход - вместо ссылки и .contains просто проверьте, есть ли у цели элемент .closest в строке поиска:

useEffect(() => {
    const handler = (e) => {
        if (!e.target.closest('.search-drop-down')) {
            setSearch("");
        }
    }
    document.addEventListener("mousedown", handler);
    return () => {
        document.removeEventListener("mousedown", handler);
    };
}, []);
2
CertainPerformance 5 Апр 2021 в 19:40