Есть ли удобный способ ссылки на элемент DOM в компонентах Svelte? - PullRequest
Новая
       7

Есть ли удобный способ ссылки на элемент DOM в компонентах Svelte?

3 голосов
/ 13 октября 2019

Я привык к библиотекам / фреймворкам, таким как React или Angular, которые оба имеют удобные способы доступа к фактическим элементам DOM, которые принадлежат логическим компонентам. В React есть утилита createRef, а в Angular есть, помимо прочего, переменные шаблона в сочетании, например, с. @ViewChild.

Эти ссылки не только упрощают доступ к DOM без явного запроса элементов, они также постоянно обновляются с DOM, так что они всегда содержат ссылку на текущий элемент. Я только начал с Svelte для своего любимого проекта, но хотя я просмотрел документацию Svelte и много гуглял, я не нашел ничего похожего в концепции и использовании. Я предполагаю, что это может иметь какое-то отношение к концепции Svelte без времени выполнения, но все еще не знаю, почему не было бы такой утилиты.

Итак, вопрос в том, есть ли подобная утилита в Svelte?

1 Ответ

4 голосов
/ 13 октября 2019

На основе примера, найденного на https://svelte.dev/tutorial/bind-this (спасибо @skyboyer), вы можете использовать bind:this ( try в REPL ): 

<script>
    import { onMount } from 'svelte';

    let myInput;

    onMount(() => {
        myInput.value = 'Hello world!';
    });
</script>

<input type="text" bind:this={myInput}/>

Youтакже можно использовать use:action, как видно по https://svelte.dev/docs#use_action и предложено @collardeau ( try в REPL ): 

<script>
    import { onMount } from 'svelte';

    let myInput;

    function MyInput (node) {
        myInput = node;
        myInput.value = 'Hello world!';
    }
</script>

<input type="text" use:MyInput/>
...