svelte - 如何在 Svelte 中的 Prop 更改时刷新 DOM？

Question

我有一个类似网格的结构，其中有一个来自父对象的指针对象。现在通过一些操作，指针正在更新，但更改没有反射(reflect)在子组件中，DOM 也没有更新。

家长:

<script>
 import Boxes from "./Boxes.svelte";

 let boxes = [
   ["", "", "", "", "", "", "", ""],
   ["", "", "", "", "", "", "", ""],
   ["", "", "", "", "", "", "", ""],
   ["", "", "", "", "", "", "", ""],
   ["", "", "", "", "", "", "", ""],
   ["", "", "", "", "", "", "", ""],
   ["", "", "", "", "", "", "", ""],
   ["", "", "", "", "", "", "", ""]
 ];

 let activeBox = {
   x: 0,
   y: 0
 };

 function handleKeydown(keyEvent) {
   let i = activeBox.x;
   let j = activeBox.y;

   const width = boxes[i].length,
     height = boxes.length,
     left = 37,
     up = 38,
     right = 39,
     down = 40,
     tab = 9,
     backspace = 8;



   // Loop around single row with right and left arrows
   if (keyEvent.keyCode == right) {
     activeBox.x = activeBox.x + 1;
     if(activeBox.x === boxes[i].length) activeBox.x = 0;
     return;
   }

   $: console.log("^^^ activeBox &&", activeBox);
</script>

<style>
 main {
   display: flex;
   align-items: center;
   justify-content: center;
 }

 @media (min-width: 640px) {
   main {
     max-width: none;
   }
 }
</style>

<svelte:window on:keydown="{handleKeydown}" />
<main>
 <Boxes boxes={boxes} activeBox={activeBox} />
</main>

子组件正在使用 activeBox 变量来呈现选定的框。但这似乎不起作用，因为当第一个渲染器完美运行时，盒子不会随之更新。

child :

<script>
  export let boxes;
  export let activeBox;

  $: console.log("^^^ active Box updated");

  function getSelectedClass(i, j) {
    if (activeBox.x === j && activeBox.y === i) {
      return "selected";
    }
    return "";
  }
</script>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    background-color: #2196f3;
    padding: 0px;
  }
  .grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    width: 40px;
    height: 40px;
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }
  .selected {
    border: 1px solid red;
  }
</style>

<main>
  <div class="grid-container">
    {#each boxes as row, i}
      {#each row as column, j}
        <div class=" grid-item {getSelectedClass(i, j)}">{boxes[i][j]}</div>
      {/each}
    {/each}
  </div>
</main>

我真的需要一些洞察力，因为我还没有正确理解 Svelte 的概念。任何帮助将不胜感激。

Answer 1

使用您的代码，activeBox 的值实际上已传播给子项，但您看不到它，因为子项中没有使用它的 react 代码。

当它所依赖的变量的值发生变化时，响应式(Reactive)代码会重新执行和重新评估，但仅限于立即出现在响应式(Reactive)代码中的变量。

因此，在这段代码中:

  $: console.log("^^^ active Box updated");

...根本没有变数。所以这个 block 最初会运行一次，然后再也不会运行。

这个:

    {#each boxes as row, i}
      ...
    {/each}

只要 boxes 变量发生变化，就会重新计算。

在这方面:

        <div class=" grid-item {getSelectedClass(i, j)}">...</div>

... react 值{getSelectedClass(i, j)} 仅“看到”变量getSelectedClass、i 和j。 i 和 j 是局部变量，因此 Svelte 不会跟踪它们。 getSelectedClass 是一个顶级变量，因此它会被跟踪并且如果它的值改变了 block 重新评估(即 getSelectedClass = 'foo' )，但这里从来不是这种情况。

那么...如何解决？

只需在响应式表达式中添加 activeBox 即可让编译器在其值更改时重新计算它(即使它实际上并未在函数中使用)。因此，这将按原样修复您的代码:

        <div class=" grid-item {getSelectedClass(i, j, activeBox)}">...</div>

另一个选择是使用另一个基于实际包含 activeBox 变量的表达式的结构:

        <div class="grid-item" class:selected={activeBox.x === j && activeBox.y === i}>{boxes[i][j]}</div>

这是一个中间立场:

<script>
  // NOTE this block contains activeBox variable, so isSelected is recreated when
  // activeBox changes
  $: isSelected = (i, j) => activeBox.x === j && activeBox.y === i
</script>

<main>
  <div class="grid-container">
    {#each boxes as row, i}
      {#each row as column, j}
        <div class="grid-item" class:selected={isSelected(i, j)}>{boxes[i][j]}</div>
      {/each}
    {/each}
  </div>
</main>