javascript - 为什么无法读取属性“classList”?
问题描述
我正在尝试根据变量是否等于 0 添加和删除一个类。这是我的代码:
import { LitElement, html } from 'lit-element';
class SelectCounter extends LitElement {
static get properties() {
return {
numPassengers: {type: Number},
};
}
constructor() {
super();
this.numPassengers = 0;
this.disableState();
}
createRenderRoot() {
return this;
}
disableState() {
this.btn = document.querySelector('.minus');
if (this.numPassengers === 0) {
this.btn.classList.add('counter__btn--disable');
}
}
render(){
return html`
<div class="counter">
<a class="counter__btn minus" href="#"></a>
<span class="counter__label">${this.numPassengers}</span>
<a class="counter__btn" href="#"></a>
</div>
`;
}
}
customElements.define('select-counter', SelectCounter);
我已经尝试了几种方法,但我不明白为什么会这样。任何想法?
解决方案
disableState()
当组件的 DOM 尚未准备好时,您正在调用构造函数,因此:
this.btn = document.querySelector('.minus');
是null
。
如果您将该逻辑移入,firstUpdated()
那么它应该可以工作。
firstUpdated() {
disableState();
}
disableState() {
// Also, consider querySelecting inside this.renderRoot
// to avoid picking elements with the same class in
// other parts of the document
this.btn = this.renderRoot.querySelector('.minus');
// ...
}
请注意,您可以以更具声明性的方式执行相同的操作,而无需选择元素:
render() {
return html`
<div class="counter">
<a class="counter__btn minus ${this.numPassengers === 0 ? 'counter__btn--disable' : ''}" href="#"></a>
<span class="counter__label">${this.numPassengers}</span>
<a class="counter__btn" href="#"></a>
</div>
`;
}
或使用lit-html
'classMap
指令:
import {classMap} from 'lit-html/directives/class-map.js';
// ...
render() {
return html`
<div class="counter">
<a class=${classMap({
counter__btn: true,
minus: true,
'counter__btn--disable': this.numPassengers === 0,
})} href="#"></a>
<span class="counter__label">${this.numPassengers}</span>
<a class="counter__btn" href="#"></a>
</div>
`;
}
推荐阅读
- java - 当 Spring Boot 健康检查状态发生变化时得到通知
- javascript - 如何自定义完整日历中的时间段?
- c# - 使用带有 Azure AD 的 ASP.NET Core MVC 对 ASP.NET Core WebAPI 进行身份验证
- php - 虚拟主机端口 8080. apache 2.4 。删除 htaccess 中的 index.php
- ios - renderCommandEncoder.drawPrimitives(...) 上的 SIGABRT 错误
- css - DIV ID 上的媒体查询
- database - PostgreSQL 每月数据库增长
- php - 在上传到数据库之前和移动到目录之前,我如何替换或删除文件中的特殊字符?
- javascript - javascript中`和'之间的主要区别是什么
- c - 仅使用递归在 c 中的质因数