Question

让我们说，我希望有一个指向DOM元素的UI叠加层（让我们将其称为“ Tap Here”）。要获得它应该指向的位置：我使用bind：this并且它可以工作，除非我不在{#await}中使用它。

<script>
    import TapHere from './TapHere.svelte';
    let enableButton;
    $: enableButtonRect = enableButton && enableButton.getBoundingClientRect();

    let promise = new Promise((resolve) => {
        setInterval(resolve, 3000);
    });
</script>

{#await promise}
<p>
    waiting...
</p>
{:then}
<div>
  <button bind:this={enableButton}>Enable</button>
  <button>Disable</button>
  <TapHere rect={enableButtonRect}/>
</div>
{/await}

https://svelte.dev/repl/4e0e477d6a394a83a2d79b3d1fa50525?version=3.12.1

（enableButtonRect可能会有点发红，因为此问题只是通过尝试将enableButton本身传递给TapHere来体现出来的。）如果删除等待，则TapHere会到达预期的位置；但是等待时，tapHere不会被enableButtonRect更改触发。我应该在这里做什么？

Answer 1

即使在承诺解决之后，enableButton仍然undefined在承诺解决块内{strong} 。

但是，如果您评估enableButton 超出区块范围，则在承诺仍未完成时正确undefined，并且一次正确设置为[object HTMLButtonElement]诺言解决了。

必须对此行为进行解释，但我不知道。希望有人能详细说明。

因此，您可以通过将<TapHere>组件移到promise块之外来获得所需的结果：

<script>
  import TapHere from './TapHere.svelte';
  let enableButton;
  $: enableButtonRect = enableButton && enableButton.getBoundingClientRect();

  let promise = new Promise((resolve) => {
    setInterval(resolve, 3000);
  });
</script>

{#await promise}
<p>
  waiting...
</p>
{:then}
<div>
  <button bind:this={enableButton}>Enable</button>
  <button>Disable</button>
</div>
<p>Inside promise resolve block: {enableButton}</p>
{/await}
<p>Outside promise resolve block: {enableButton}</p>
<TapHere rect={enableButtonRect}/>

编辑

要在承诺解决后显示工具提示，您可以执行以下操作：

<script>
  import { onMount } from 'svelte';
  import TapHere from './TapHere.svelte';
  let enableButton;
  let disabled = true;
  $: enableButtonRect = enableButton && enableButton.getBoundingClientRect() && !disabled;

  onMount(() => {
    const interval = setInterval(() => { disabled = false }, 3000)
    return () => clearInterval(interval)
  })
</script>

<div>
  <button bind:this={enableButton} {disabled}>Enable</button>
  <button>Disable</button>
  <TapHere rect={enableButtonRect}/>
</div>

（REPL更新）

https://svelte.dev/repl/e647bc2b1a024e8885ebb96317887710?version=3.12.1

绑定时如何触发反应：在Svelte的{#await}中使用此方法？

1 个答案:

编辑