根据视口宽度，将细长组件附加到另一个组件

Question

有三个组件-A、B、C。C成分在A中。

如果视口宽度小于x px，则需要将C组件移除到B中。

用香草js很容易。是否可以在不创建两个C组件的情况下实现苗条？

vanilla-js示例-<https://codepen.io/vladbelozertsev/pen/eYzoYmO?editors=1111>

Answer 1

没有官方支持的方法/构造。在Svelte中，组件在树中移动的唯一情况是使用键控列表：

{#each items as item}
<MyComponent key={item.id}>{item.text}</MyComponent>
{/each}

有一些关于门户网站的讨论，甚至还有一个库。

否则，您仍然可以通过使用DOM API自己移动Svelte组件中的元素来实现类似的东西。

Bellow就是一个例子；一个部件"；(实际上，组件的元素——组件本身在虚拟Svelte组件树中保持在同一位置(——REPL。

Child.svelte

<div>I am Child</div>

App.svelte

<script>
import Child from './Child.svelte'

let wrapper
let left
let right

const goLeft = () => {
left.appendChild(wrapper)
}

const goRight = () => {
right.appendChild(wrapper)
}
</script>
<button on:click={goLeft}>Left</button>
<button on:click={goRight}>Right</button>
<div>
<div class="container left" bind:this={left} />
<div class="container right" bind:this={right} />
</div>
<div bind:this={wrapper}>
<Child />
</div>