0

我有下面的 html,我在一个发光的组件中呈现:

render() {
    return html`
          <div class="table">
            <div id="col">
              <p>testing this component</p>
</div>
</div>`

通过以下构造函数,我正在调用调整大小处理程序:

constructor() {
    super();
    window.addEventListener('resize', this._handleResize);
  }

handleresize 方法如下:

private _handleResize = () =>{
  var some_id = document.getElementById('col');
  var tag = some_id.tagName; ///some_id is coming out as null
}

我正在尝试获取'col' ID 的标签,但它让我为空。有人可以告诉这里的错误是什么吗?

4

1 回答 1

1

您应该使用参考,而不是查询元素:

引用渲染的 DOM

import {ref} from 'lit/directives/ref.js';

[...]

  colRef = createRef();

[...]

  render() {
    return html`
      <div class="table">
        <div id="col" ${ref(this.colRef)}>
          <p>testing this component</p>
        </div>
      </div>`
  }

  private _handleResize = () =>{
    const col = this.colRef.value!;
    const tag = col.tagName;
  }

我还建议使用constandlet而不是 var。此外,您可能应该ResizeObserverwindow. 也不要忘记注销您的事件监听器。

于 2022-01-13T07:26:24.387 回答