如何在 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 无效。

Answer 1

您可以获得当前的 HTML 元素，将其作为属性:

添加到您的组件中

@Element() myElement: HTMLElement;

您可以阅读更多相关内容here

希望对您有所帮助:)

Answer 2

为了扩展 Fernando 的回答，@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>
        );
    }
}

Answer 3

From the official docs

In cases where you need to get a direct reference to an element, like you would normally do with document.querySelector, you might want to use a ref in JSX.

所以在你的情况下：

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>
    );
  }
}

如何在 Stenciljs 中获取 DOM 元素？

How to get a DOM element in Stenciljs?

javascript

stenciljs