Одной из основных особенностей 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 и сохраняете ссылку на элемент для использования в будущем. Эта возможность может быть очень полезна в определенных сценариях, таких как запуск анимации или запуск мультимедиа. С другой стороны, перед использованием ссылок всегда старайтесь сначала понять, сможете ли вы достичь своих целей с помощью типичного потока данных с использованием реквизита.