Блог

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

Как получить элемент документа, когда я использую внешний скрипт в react?

#javascript #reactjs

Вопрос:

Я использую React для создания своего проекта. Я сделал кнопку чата с помощью внешнего скрипта. И я бы хотел, чтобы эта кнопка исчезла на некоторых конкретных страницах. Я не могу использовать ссылку для доступа к элементу этой кнопки, поэтому я использовал document.getElementById. Но моя проблема в том, что мой код иногда возвращает ошибку. (Я думаю, что при запуске моего кода кнопка чата не запускалась внешним скриптом.) Как я могу решить эту проблему?

     useEffect(() => {
//access chat button element by using document.getElementById
        const chatBtn = document.getElementById('ch-plugin-launcher');

//if it doesn't exist in current page, it returns.
        if (!chatBtn) {
            return;
        }

//if a button exists, it will be hide.
        chatBtn.classList.add('hide');

        return () => {
            chatBtn.classList.remove('hide');
        };
    }, []);

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

1. В чем ошибка?

2. Кроме опроса элемента, что вы можете сделать, когда этот компонент монтируется и проверяется, а целевого элемента нет в DOM? Что это за внешний скрипт? В чем заключается ошибка?

Ответ №1:

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

 useEffect(() => {
 // Your code
 
 return () => {
    document.getElementById('ch-plugin-launcher')?.classList?.remove('hide');
  };
});

Ответ №2:

Я думаю, что ответ @0x6368656174 правильный. Просто для большего разъяснения, почему:

Когда именно реакция устраняет эффект? React выполняет очистку при отключении компонента. Однако, как мы узнали ранее, эффекты выполняются для каждого рендеринга, а не только один раз. Вот почему React также очищает эффекты от предыдущего рендеринга перед запуском эффектов в следующий раз. Мы обсудим, почему это помогает избежать ошибок и как отказаться от этого поведения, если это создаст проблемы с производительностью, ниже.

Источник: https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1

Метки: ,