如何安装svelte_如何按需重新渲染Svelte组件

如何安装svelte

Yesterday I had this problem: I was using a Datepicker Svelte component - 2 instances of it.

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

Just to give you more context, I want to set a starting date, and an ending date:

为了给您更多背景信息，我想设置一个开始日期和一个结束日期：

When you clicked the starting date, the date picker showed up:

当您单击开始日期时，日期选择器出现：

When you clicked the ending date, the second date picker showed up:

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

Now the problem was that based on the starting date, the end date had some constrains. For example, a logical one was that you can’t set an end date that’s prior to the starting date.

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

The date picker component exposed a selectableCallback function prop, called when the component is first rendered, running for all the dates in the calendar, allowing me to return false on some dates to disable them.

日期选择器组件公开了一个selectableCallback函数道具，该组件在首次呈现时在日历中的所有日期上运行，从而允许我在某些日期返回false以禁用它们。

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

<Datepicker
selectableCallback={endDateSelectableCallback
}>

Sounds great!

听起来不错！

Except this function only ran when the component was rendered the first time.

除了此功能，仅在首次渲染组件时运行。

I needed a way to re-run that function when the other component changed its value. So I could remove all dates prior to the starting date selected. Also, it had to run multiple times as the user could change idea.

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

So.. when selecting a date on the other component, I used the on:dateSelected event to just reassign the function I assigned to selectableCallback, called endDateSelectableCallback, to itself.

所以..其他部件上选择日期时，我用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
}>

This might not be the most idiomatic Svelte code and I could probably add a refresh={refreshComponent} prop instead. But maybe it is idiomatic, since the Svelte docs also mention adding a redundant assignment to trigger a re-render when we update a value:

这可能不是最惯用的Svelte代码，我可能可以添加refresh={refreshComponent} 。 但这也许是惯用的，因为Svelte文档还提到在我们更新值时添加冗余分配以触发重新渲染：

I think that this is a very specific pattern that might not be very common. I haven’t encountered this problem before, as far as I remember, so I’m happy with this solution so far - it works.

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

翻译自: https://flaviocopes.com/svelte-rerender-on-demand/

如何安装svelte