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

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

转载作者：行者123 更新时间：2023-12-02 05:15:19

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

通常，表单显示为 <Component field="value" /> ，用户修改该字段并单击 Enter key ，我想要 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>

最佳答案

我相信我已经找到了一个优雅的解决方案来解决当组件的数据更改超出其范围时强制组件更新的问题。

main.js;来自在线示例的普通版本，没有特殊更改:

import App from './App.svelte';

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

export default app;

index.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>

App.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范围内，因此通过window.neek.update调用时能够强制重新渲染()。此设置使用 window.neek.counter 作为按钮使用的内部数据(通过 notneek.counter)，并允许深层属性(例如 neek.camp .bell = "ish") 将在组件外部更新，并在调用 neek.update() 后反射(reflect)。

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

最重要的是，您可以在 update 函数中按照您想要的粒度进行调整，以便仅同步您想要同步的部分。

关于svelte - 如何在 svelte 3 中强制渲染？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58403515/