Cómo volver a renderizar un componente Svelte a pedido

Cómo volver a renderizar un componente de Svelte a pedido y, en particular, cómo volver a renderizarlo cuando quiero ejecutar una función de apoyo nuevamente

Ayer tuve este problema: estaba usando un componente Datepicker Svelte - 2 instancias de él.

Solo para darle más contexto, quiero establecer una fecha de inicio y una fecha de finalización:

The 2 pickers

Cuando hizo clic en la fecha de inicio, apareció el selector de fechas:

The first picker

Cuando hizo clic en la fecha de finalización, apareció el segundo selector de fecha:

The second picker

Ahora el problema era que, según la fecha de inicio, la fecha de finalización tenía algunas limitaciones. Por ejemplo, una lógica era que no se puede establecer una fecha de finalización anterior a la fecha de inicio.

El componente selector de fecha expuso unselectableCallbackfunción prop, llamada cuando el componente se renderiza por primera vez, ejecutándose para todas las fechas en el calendario, lo que me permite devolver falso en algunas fechas para deshabilitarlas.

<script>
let endDateSelectableCallback = date => {
  //TODO: decide if date is ok
}
</script>

<Datepicker selectableCallback={endDateSelectableCallback }>

¡Suena genial!

Excepto que esta función solo se ejecutó cuando el componente se procesó por primera vez.

Necesitaba una forma de volver a ejecutar esa función cuando elotrocomponente cambió su valor. Entonces podría eliminar todas las fechas anteriores a la fecha de inicio seleccionada. Además, tuvo que ejecutarse varias veces para que el usuario pudiera cambiar de idea.

Entonces ... al seleccionar una fecha en el otro componente, utilicé elon:dateSelectedevento para reasignar la función que asigné aselectableCallback, llamadoendDateSelectableCallback, a sí mismo.

<script>
let endDateSelectableCallback = date => {
  //TODO: decide if date is ok
}
</script>

<!-- first date picker, start date --> <Datepicker on:dateSelected={e => { endDateSelectableCallback=endDateSelectableCallback; }}> selectableCallback={endDateSelectableCallback }>

<!-- second date picker, end date --> <Datepicker selectableCallback={endDateSelectableCallback }>

Este podría no ser el código Svelte más idiomático y probablemente podría agregar unrefresh={refreshComponent}prop en su lugar. Pero tal vez sea idiomático, ya que los documentos de Svelte también mencionan agregar una asignación redundante para activar una repetición cuando actualizamos un valor:

The svelte docs

Creo que este es un patrón muy específico que podría no ser muy común. No me he encontrado con este problema antes, por lo que recuerdo, así que estoy contento con esta solución hasta ahora: funciona.

Descarga mi gratisManual Svelte


Tutoriales más esbeltos: