/

如何根據需求重新渲染 Svelte 元件

如何根據需求重新渲染 Svelte 元件

如何在需要時重新渲染 Svelte 元件，特別是在需要再次運行函數屬性時重新渲染。

昨天我遇到了這個問題：我正在使用一個日期選擇器 Svelte 元件 - 其中有兩個實例。

為了讓您更了解背景，我想設置一個開始日期和一個結束日期：

The 2 pickers

當您點擊開始日期時，日期選擇器會出現：

The first picker

當您點擊結束日期時，第二個日期選擇器會出現：

The second picker

問題在於根據開始日期，結束日期有一些限制。例如，一個合理的限制是您不能設置早於開始日期的結束日期。

日期選擇器元件公開了一個名為 selectableCallback 的函數屬性，該函數在元件首次渲染時運行，遍歷日曆中的所有日期，讓我有機會返回 false 來禁用某些日期。

1
2
3
4
5
6
7
8
9
<script>
let endDateSelectableCallback = date => {
 //TODO: decide if date is ok
}
</script>

<Datepicker
selectableCallback={endDateSelectableCallback}
>

聽起來很好！

但是，這個函數只在元件首次渲染時運行。

我需要找到一種方法，在其他元件更改其值時重新運行該函數，這樣我就可以移除所有早於所選開始日期的日期。此外，該函數可能需多次運行，因為用戶可能會更改想法。

所以…當在其他元件上選擇日期時，我使用了 on:dateSelected 事件來重新分配給我之前賦值給 selectableCallback 的函數 endDateSelectableCallback：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
let endDateSelectableCallback = date => {
 //TODO: decide if date is ok
}
</script>

<!-- 第一個日期選擇器，開始日期 -->
<Datepicker on:dateSelected={e => {
 endDateSelectableCallback = endDateSelectableCallback;
}}>
selectableCallback={endDateSelectableCallback}
</Datepicker>

<!-- 第二個日期選擇器，結束日期 -->
<Datepicker selectableCallback={endDateSelectableCallback}>
</Datepicker>

這可能不是最符合 Svelte 寫法的代碼，我可能可以添加一個 refresh={refreshComponent} 屬性代替。但也許這是符合慣例的，因為 Svelte 文檔中也提到，在更新值時添加冗餘賦值以觸發重新渲染。

The svelte docs

我認為這是一種非常具體的模式，可能不太常見。據我記得，我以前沒遇到過這個問題，所以到目前為止，我對這個解決方案感到滿意 - 它運作正常。