svelte 中的反应性问题

Question

<div class="scrollable-div">
    <AnnotatedText {iobStringLatest} />
</div>

我正在用 svelte 编写这段代码，我开发了一个可以在我的代码中重用的组件。然而，我正在向该组件提供输入。起初还可以，但是当使用新值更新 iobStringLatest 时，AnnotatedText 组件不会自动渲染。

有人可以帮我吗？

Answer 1

<script>
  let iobStringLatest = "";

  function updateContent() {
    iobStringLatest = "This is the new content";
  }
</script>

<div class="scrollable-div">
  <AnnotatedText {iobStringLatest} />
</div>

<button on:click={updateContent}>Update Content</button>

通过使用

iobStringLatest

声明

let

，可以使其具有反应性。 Svelte 将跟踪其值的任何更改。

为

iobStringLatest

分配新值会触发使用它的组件的重新渲染 (

AnnotatedText

)。这可确保组件反映最新数据。