Блог

Главная - Вопросы по программированию - Ошибка типа: не удается установить свойство ‘src’ для нулевой реакции

Ошибка типа: не удается установить свойство ‘src’ для нулевой реакции

#reactjs #null #typeerror #src

#reactjs #null #ошибка типа #Src

Вопрос:

У меня возникла проблема с распознаванием идентификатора изображения. В моем домашнем компоненте я использую

document.getElementById(«цветок жизни-изображение»).src=»./images/цветок жизни.png

несколько раз, но по причине, которую я не могу понять в других функциях, сообщения об ошибке нет, только в этом:

 function handleClick() { 
    if (document.getElementById("flower-of-life-image").src="./images/flower-of-life.png"){
        return document.getElementById("flower-of-life-image").src="./images/Krishna-Hara-logo.png";
    }
}

Другие функции, в которых я это использую:

     function scrollMore() {
    scroll.scrollMore(1036);
    elementIsClicked = true;
    if (elementIsClicked  === true) {
        document.getElementById("flower-of-life-image").src="./images/Krishna-Hara-logo.png";
    }
}

и другая функция :

 window.onscroll = function(ev) {
    if ((window.innerHeight   window.scrollY) >= 1036) {
        // you're at the bottom of the page
        document.getElementById("flower-of-life-image").src="./images/Krishna-Hara-logo.png";
    } else if ((window.innerHeight   window.scrollY) <= 1036){
        document.getElementById("flower-of-life-image").src="./images/flower-of-life.png";
    }
};

Оба сообщения об ошибке вообще отсутствуют.

Функция scrollMore используется для тега ссылки:

  <Link
    to="/"
    onClick={scrollMore}
 >

Функция handleClick, которая не работает, также находится в теге ссылки :

 <Link to="/krishnahara" id="menu-el" onclick={handleClick()}>

На самом деле, существует 7 тегов, подобных этому, с разными путями к местоположению окна, к которым я применяю функцию handleClick() .

Я застрял и пытался исправить это весь день. Любая помощь приветствуется.

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

1. Вы проверяли DOM в инструментах разработчика вашего браузера и нашли изображение с этим точным id="flower-of-life-image" свойством?

2. Вы не должны использовать document.getElementById (или .querySelector и т. Д.) При использовании React; вместо этого используйте ссылки на элементы.

3. @JulienD Спасибо за быстрый ответ, я проверил DOM и нашел изображение с этим идентификатором

4. @AKX Спасибо, я только что создал ссылку для изображения с useRef . Когда я пишу: flowerOfLifeImgRef.src=»./images/flower-of-life.png», я получаю эту ошибку: «Ошибка типа: невозможно добавить свойство src, объект не является расширяемым» amp; когда я пишу: flowerOfLifeImgRef.current.src=»./images/flower-of-life.png» Я получаю: «Ошибка типа: не удается установить для свойства ‘src’ значение undefined»

5. @ana_m flowerOfLifeImgRef.current может быть undefined ; вам нужно будет сделать if(flowerOfLifeImgRef.current) flowerOfLifeImgRef.current.src = ...