如何在具有不同 ID 的不同页面上使用两个 Svelte 组件？

Question

我想在网站的两个不同页面上使用两个不相关的 svelte 组件，比如 /cats 和 /dogs 所以在 main.js 我有

import App from './App.svelte'; //this is empty

import ListCats from './ListCats.svelte';

import ListDogs from './ListDogs.svelte';
 
new ListCats({
  target: document.querySelector('#list-cats'),
});

new ListDogs({
  target: document.querySelector('#list-dogs'),
});

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

export default app;

问题是错误：

Uncaught Error: 'target' is a required option
    at new SvelteComponentDev (index.mjs:1993:19)
    at new ListDogs (ListDogs.svelte:76:39)
    at main.js:9:1
    at main.js:24:2

这是因为 /cats 页面没有 #list-dogs 并且 /dogs 没有 #list-cats 并且两个页面都导入了相同的 bundle.js of svelte。

如何避免这个问题？

Answer 1

尝试

let target = document.querySelector('#list-cats');
if (target) new ListCats({ target });

target = document.querySelector('#list-dogs');
if (target) new ListDogs({ target });