Одной из основных особенностей Stencil является использование JSX для реализации функции рендеринга компонента. В React вы можете использовать ссылки, чтобы получить доступ к элементам DOM, которые являются частью вашего компонента. Трафарет обладает такой же способностью, и вы можете использовать его, когда это необходимо. В этом посте я покажу вам, как ссылаться на элемент DOM, который является частью вашего компонента Stencil.

Итак, приступим.

Зачем использовать Refs?

Первый вопрос, который вы можете задать себе, - зачем вообще использовать ссылки на элементы? Давайте проясним это.

В типичном потоке данных вы передаете реквизиты от родительского элемента к его дочерним элементам. При прохождении реквизита. дочерний компонент будет повторно отрисован, и вы получите его новое состояние, отображаемое на экране. Бывают случаи, когда вам нужно обязательно изменить ребенка за пределами этого типичного потока. Вот несколько примеров вещей, которые могут нуждаться в другом потоке:

  • Запуск анимации
  • Использование сторонних компонентов с собственным API
  • Реализация форм, в которых может потребоваться выполнение таких действий, как выделение текста или фокус.

Теперь, когда мы понимаем, что нам могут понадобиться ссылки на внутренние элементы, пора понять, как реализовать их в Stencil.

Трафарет Refs

Чтобы создать ссылку на внутренний элемент в Stencil, вы будете использовать атрибут ref. Атрибут ref получает функцию, которая принимает ссылку на элемент и возвращает значение void. В реализации функции вы установите ссылку на член родительского компонента.
Давайте посмотрим на пример:

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

@Component({
  tag: 'custom-text-input',
  shadow: true
})
export class CustomTextInput {
  private textInput?: HTMLInputElement;

  constructor() {
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    this.textInput.focus();
  }

  render() {
    return (
      <div>
        <input
          type="text"
          ref={el => this.textInput = el as HTMLInputElement} />

        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

В этом примере вы можете видеть, что у класса CustomTextInput есть закрытый член с именем textInput. В функции render вы устанавливаете ссылку на элемент ввода, используя следующий код:

ref={el => this.textInput = el as HTMLInputElement}

Затем, когда кто-то нажимает на кнопку, вызывается focusTextInput, который будет использовать сохраненный элемент для фокусировки на элементе ввода.

Это, конечно, простой пример, но я надеюсь, что вы понимаете, как установить ссылку на элемент.

Резюме

Компоненты трафарета могут ссылаться на дочерние элементы. Вы используете атрибут ref и сохраняете ссылку на элемент для использования в будущем. Эта возможность может быть очень полезна в определенных сценариях, таких как запуск анимации или запуск мультимедиа. С другой стороны, перед использованием ссылок всегда старайтесь сначала понять, сможете ли вы достичь своих целей с помощью типичного потока данных с использованием реквизита.