在 Svelte 中重新渲染布局后执行功能

Question

当我单击 Svelte 中的表格行时，我想创建一个弹出菜单。我使用document.querySelectorAll 方法为onMount 内的每个表格行添加了一个onclick 事件。在onMount 函数中，我还重新渲染了显示的表格。如何将 onclick 值应用于重新渲染的元素？

onMount(() => {
  console.log(document.querySelectorAll(".results .table table tbody tr"));
  /* -> returns array with only 1 element -> not correct */

  /* ... re-render logic here */
}

但是当我添加超时时：

onMount(() => {
  setTimeout(() => {
      console.log(document.querySelectorAll(".results .table table tbody tr"));
  }, 5000);
  /* -> returns array with all elements */

  /* ... re-render logic here again */
}

可以在here找到包含完整源代码的 REPL

Answer 1

我正在写一些想法，但是太长了，无法发表评论。

你在 Svelte 可以为你做的 REPL 中做了大量的额外工作。我同意@voscausa 的观点，即您应该将活动委托给table。您几乎不必在 Svelte 中使用 document.querySelector。您将遍历所有行两次。您的所有事件侦听器附件都应该是标记中的属性，而不是附加在 JS 中，也不附加在初始化函数中（因此事件委托到表中）。您一直在监控鼠标位置，但您只在onclick 中使用它，这是一个MouseEvent 并且可以访问X 和Y 数据。

将点击监听切换到容器：

<div class="results" on:click={handleClick}> ... </div>

<script>
  function handleClick(e) {
    const tr = e.target.closest('tr');
    const td = e.target.closest('td');
    if (td) {
      /* code */
    } else {
      /* code */
    }
  }
  </script>

如果您需要它出现在整个文档中，您可以使用<svelte:window> 而不是.results。

要更新 .option div 的 css，请执行以下操作：

<div class="options" style=`left:${optionsStyle.left}px;top:${optionsStyle.top}px`> ... </div>
<script>
  let optionsStyle = {left: 0, top: 0};

  function handleClick(e) {
    /* code */

    let left = 0, right = 0;
    /* calculate left and right here */
    optionsStyle  = {left: e.clientX, top: e.clientY};

    /* code */
  }
</script>

有关切换类，请参阅class directive。一个元素上可以有多个类指令。 （很明显，我还没有完成所有的逻辑。）

<div class="options" class:expand={optionsExpand}> ... </div>
<script>
  let optionsExpand = false;

  function handleClick(e) {
    const tr = e.target.closest('tr');
    const td = e.target.closest('td');
    if (td) {
      /* code */
      optionsExpand = true;
    } else {
      /* code */
      optionsExpand = false;
    }
  }
</script>

我个人会将选项弹出窗口变成它自己的组件，并将 optionsExpand 布尔值作为道具传递。

像我在这里描述的那样做事情会让你以 Svelte 思维方式思考，它会简化你的代码，你不需要超时，也不需要afterUpdates 函数。