svelte - 如何在 svelte 3 中强制渲染？

问题描述

我有一个带有输入字段的表单。Enter当我键入（keyup）键时，必须清除其中一个字段。我知道我可以将此字段作为受控字段处理（意味着监听keyup并维护该字段的副本），或者使用双向绑定，但在我的用例中我不能做后者，我宁愿不做前者。因此，我的问题是，如何强制渲染 Svelte 组件？

通常，表单显示为<Component field="value" />，用户修改字段并单击Enter键，我想将app.set(field, value)字段重置为value，即使在 Svelte 看来，field属性没有改变。那可能吗？

我尝试过的一个转折是更新Svelte 组件内的属性，希望当时app.set(field, value)，Svelte 会看到属性的两个不同值field并更新组件。但这似乎不起作用：

<script>

  const watchForEnter = ev => {
    if (ev.keyCode === 13) {
      ev.preventDefault();
      const formData = new FormData(ev.target.closest("form"));
      const tag = formData.get("tag");
      dispatch({ [ADDED_TAG]: tag });
    }
  };

  const updateCurrentTag = ev => {
    currentTag = new FormData(ev.target.closest("form")).get("tag");
    console.log(`currentTag!`, currentTag)
  }

</script>

        <form>
            <fieldset class="form-group">
              <input
                name="tag"
                class="form-control"
                type="text"
                placeholder="Enter tags"
                on:input={updateCurrentTag}
                value={currentTag}
                on:keyup={watchForEnter} />
            </fieldset>
        </form>

标签： svelte

解决方案

我相信我已经找到了一个优雅的解决方案来解决当组件的数据在其范围之外发生更改时强制组件进行更新的问题。

主.js；来自在线示例的香草，没有特殊变化：

import App from './App.svelte';

var app = new App({
    target: document.body
});

export default app;

索引.html；注意window.neek = {...}：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Svelte app</title>
    <script>
        window.neek = { nick: true, camp: { bell: "Neek" }, counter: 0 };
    </script>
    <script defer src='/build/bundle.js'></script>
</head>
<body>
</body>
</html>

应用程序.svelte ; 注意$: notneek = window.neek和window.neek.update = ...：

<script>
    let name = 'world';
    $: notneek = window.neek;

    function handleClick() {
        notneek.counter += 1;
    }

    window.neek.update = function () {
        notneek = notneek;
    }
</script>

<h1>Hello { notneek.camp.bell }!</h1>

<button on:click={handleClick}>
    Clicked {notneek.counter} {notneek.counter === 1 ? 'time' : 'times'}
</button>

由于该update函数在的范围内App.svelte，因此可以在 via 调用时强制重新渲染window.neek.update()。此设置window.neek.counter用于按钮（通过notneek.counter）使用的内部数据，并允许neek.camp.bell = "ish"在组件外部更新深层属性（例如）并在neek.update()调用时反映。

在控制台中，键入window.neek.camp.bell = "Bill"并注意Hello Neek!尚未更新的内容。现在，window.neek.update()在控制台中输入，UI 将更新为Hello Bill!.

最重要的是，您可以在update函数中尽可能细化，以便只有您想要同步的部分。

svelte - 如何在 svelte 3 中强制渲染？

问题描述

解决方案

推荐阅读