如何按需重新渲染Svelte组件

如何按需重新渲染Svelte组件,尤其是当我想再次运行功能prop时如何重新渲染它

昨天我遇到了这个问题:我使用的是Datepicker Svelte组件-它有2个实例。

为了给您提供更多背景信息,我想设置一个开始日期和一个结束日期:

The 2 pickers

当您单击开始日期时,日期选择器出现:

The first picker

当您单击结束日期时,第二个日期选择器出现:

The second picker

现在的问题是,基于开始日期,结束日期受到一些限制。例如,合乎逻辑的是您不能设置结束日期早于开始日期。

日期选择器组件暴露了一个selectableCallback函数prop,在首次渲染组件时调用,针对日历中的所有日期运行,允许我在某些日期返回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

我认为这是一个非常具体的模式,可能并不常见。就我所记得,我以前从未遇到过此问题,所以到目前为止,我对这种解决方案感到满意-它可以工作。

免费下载我的苗条手册


更多精妙的教程: