时间戳

首页 > 解决方案 > 将 JavaScript 添加到 StenclJS 监听事件

javascript - 将 JavaScript 添加到 StenclJS 监听事件

问题描述

当窗口向下滚动时，我想更改组件的背景，我尝试以这种方式实现它，但它不起作用。任何指导都会有所帮助！

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

标签： javascripttypescriptstenciljs

解决方案

我不时面临的问题是，在元素被渲染并在 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");
        }
      }

我会更进一步并使用引用，因为我认为它看起来更清晰，并且具有您独立于类名的魅力。您可以从每种方法中访问元素并更轻松地进行验证：

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.elementwhich 引用您的 div 元素。

推荐阅读