Добавление JavaScript в Stencl JS Прослушивание события - PullRequest
Новая
       4

Добавление JavaScript в Stencl JS Прослушивание события

0 голосов
/ 17 января 2020

Я хочу изменить фон моего компонента, когда окно прокручивается вниз, и я попытался реализовать его таким образом, но он не работает. Любое руководство будет полезно! 

export class NewsContainer{
     @Listen('scroll', { target: 'window' })
        handleScroll(ev) {
        var newsContainer=  document.querySelector(".newsContainer");
        newsContainer.classList.remove("transparentBackground");
        newsContainer.classList.add("darkBackground");
      }

    render(){
        return  [
          <div class="newsContainer transparentBackground">Content</div>
        ]
    }
}

Я получаю следующую ошибку: 

news-container.entry.js:9 Uncaught TypeError: Cannot read property 'classList' of null
    at NewsContainer.handleScroll

1 Ответ

0 голосов
/ 20 января 2020

Время от времени я сталкивался с проблемой, заключающейся в том, что некоторые хуки или слушатели выполняются за до , элементы отображаются и доступны в дереве DOM (вызывается функция рендеринга). Это может привести к прекращению действия JavaScript для остановки приложения. Бьюсь об заклад, именно поэтому вы получаете эту ошибку. Так что простого условия if должно быть достаточно, например: 

     @Listen('scroll', { target: 'window' })
      handleScroll(ev) {
        var newsContainer=  document.querySelector(".newsContainer");
        if(newsContainer && newsContainer.classList){
         newsContainer.classList.remove("transparentBackground");
         newsContainer.classList.add("darkBackground");
        }
      }

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

export class NewsContainer{
     private element;

     @Listen('scroll', { target: 'window' })
     handleScroll(ev) {
        if(!this.element) return;
        this.element.classList.remove("transparentBackground");
        this.element.classList.add("darkBackground");
      }

    render(){
        return  [
          <div ref={(el) => {this.element = el}} class="newsContainer transparentBackground">Content</div>
        ]
    }
}

Вы можете использовать this.element, который относится к вашему элементу div.

...