如何使用需要绑定到DOM节点的JavaScript库

Question

我一直在尝试将Ag-Grid与Svelte一起使用。我了解使用此网格库的主要问题是它需要绑定到在执行代码时可能不存在的dom元素。例如：

  // lookup the container we want the Grid to use
  var eGridDiv = document.querySelector('#myGrid');

在这种情况下，#myGrid元素尚不存在。

我尝试过创建一个元素，然后像这样将其放置在Svelte组件的HTML部分上。

let eGridDiv = document.createElement("DIV"); 
let gridOptions = { columnDefs: columnDefs, rowData: $orders };
new Grid(eGridDiv, gridOptions);

然后进入HTML部分

<eGridDiv />

但是，新元素似乎没有由Ag-Grid初始化。

那么在Svelte中使用这些类型的库的推荐方法是什么？

Answer 1

如果要在组件的脚本部分中使用DOM节点，则可以使用bind:this={domNode} element binding获取对其的引用，然后在onMount中渲染该组件之后再使用它。

<script>
  import { onMount } from 'svelte';
  let domNode;

  // ...

  onMount(() => {
    const gridOptions = { columnDefs: columnDefs, rowData: $orders };
    new Grid(domNode, gridOptions);
  });
</script>

<div bind:this={domNode} />