如何按要求重新渲染一个Svelte组件🏠 返回首页如何按要求重新渲染一个Svelte组件，特别是当我想再次运行一个函

如何按要求重新渲染一个Svelte组件，特别是当我想再次运行一个函数道具时，如何重新渲染它？

昨天我遇到了这个问题：我正在使用一个Datepicker Svelte组件--它的2个实例。

为了给你提供更多的背景，我想设置一个开始日期，和一个结束日期。

The 2 pickers

当你点击起始日期时，日期选择器显示出来。

The first picker

当你点击结束日期时，第二个日期选择器显示出来。

The second picker

现在的问题是，基于起始日期，结束日期有一些约束。例如，一个逻辑上的限制是，你不能设置一个比起始日期早的结束日期。

日期选择器组件暴露了一个selectableCallback 函数道具，在组件第一次呈现时被调用，为日历中的所有日期运行，允许我在一些日期上返回false以禁用它们。

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

<Datepicker
selectableCallback={endDateSelectableCallback
}>

听起来不错

只是这个函数只在组件第一次被渲染时运行。

我需要一种方法，在其他组件改变其值时重新运行该函数。因此，我可以删除所有选择的起始日期之前的日期。另外，由于用户可以改变想法，它必须多次运行。

所以......当在另一个组件上选择一个日期时，我使用on:dateSelected 事件来重新分配我分配给selectableCallback 的函数，称为endDateSelectableCallback ，给自己。

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

这可能不是最成文的Svelte代码，我可能可以添加一个refresh={refreshComponent} 来代替。但也许这是很习惯的，因为Svelte文档中也提到当我们更新一个值时，添加一个多余的赋值来触发重新渲染。

The svelte docs

我想这是一个非常特殊的模式，可能不是很常见。在我的印象中，我以前没有遇到过这个问题，所以到目前为止我对这个解决方案很满意--它很有效。