javascript - 如何在 Stenciljs 中获取 DOM 元素？

Question

import { Component, Prop } from '@stencil/core';
@Component({
    tag: 'my-component',
    styleUrl: 'my-component.css',
    shadow: true
})
export class MyComponent {

  @Prop() first: string;
  @Prop() last: string;
  getElementHere() {
     // how can I get the div here?
  }
  render() {
    return (
      <div>
        Hello, World! I'm {this.first} {this.last}
      </div>
    );
  }
}

我想像在原生 JS 中一样获取 DOM 元素。你如何在 Stencil 中做到这一点？getElementById不起作用。

score 9 · Accepted Answer

为了扩展费尔南多的答案，@Element装饰器将组件的根元素绑定到此属性。重要的是要注意这种方法的一些属性：

@Element 绑定属性仅在组件加载后可用 ( componentDidLoad)。
因为该元素是标准 HTMLElement，所以您可以使用标准或方法访问当前组件中的元素，以检索和操作它们。.querySelector(...).querySelectorAll(...)

这是一个示例，显示何时可以访问元素，以及如何操作该元素中的节点（从 stencil 0.7.24 开始正确）：

import { Component, Element } from '@stencil/core';

@Component({
    tag: 'my-component'
})
export class MyComponent {

    @Element() private element: HTMLElement;
    private data: string[];

    constructor() {
        this.data = ['one', 'two', 'three', 'four'];
        console.log(this.element); // outputs undefined
    }

    // child elements will only exist once the component has finished loading
    componentDidLoad() {
        console.log(this.element); // outputs HTMLElement <my-component ...

        // loop over NodeList as per https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
        const list = this.element.querySelectorAll('li.my-list');
        [].forEach.call(list, li => li.style.color = 'red');
    }

    render() {
        return (
            <div class="my-component">
                <ul class="my-list">
                    { this.data.map(count => <li>{count}</li>)}
                </ul>
            </div>
        );
    }
}

score 5 · Accepted Answer

来自官方文档

在需要直接引用元素的情况下，就像通常使用 document.querySelector 一样，您可能希望在 JSX 中使用 ref。

所以在你的情况下：

import { Component, Prop } from '@stencil/core';
@Component({
    tag: 'my-component',
    styleUrl: 'my-component.css',
    shadow: true
})
export class MyComponent {

  @Prop() first: string;
  @Prop() last: string;

  divElement!: HTMLElement; // define a variable for html element

  getElementHere() {
    this.divElement  // this will refer to your <div> element
  }

  render() {
    return (
      <div ref={(el) => this.divElement= el as HTMLElement}> // add a ref here
        Hello, World! I'm {this.first} {this.last}
      </div>
    );
  }
}

score 4 · Accepted Answer

您可以获取当前的 HTML 元素，并将其作为属性添加到您的组件中：

@Element() myElement: HTMLElement;

您可以在此处阅读有关此内容的更多信息

希望这可以帮助你:)

javascript - 如何在 Stenciljs 中获取 DOM 元素？

3 回答 3

Related

Reference