如何在 Svelte 上移动道具阵列？

Question

我正在尝试构建一个帖子列表，帖子作为道具数组传递给我的组件。 问题是：我需要它有第二个和以后的帖子，因为第一个由另一个组件显示。

我正在尝试运行一个 array.splice()，但由于我不太了解 Svelte 上的反应性是如何构建的，所以我尝试过或破坏了所有方法或没有效果。

这是组件，其中 posts 是我正在谈论的数组：

<script>
import AppBlogPost from "./PostCards/AppBlogPost.svelte";

export let posts;
</script>

<style lang="scss">
</style>

<ul>
  {#each posts as post}
    <AppBlogPost {post} />
  {/each}
</ul>

Answer 1

要跳过数组中的第一个元素，您可以简单地使用数组解构：

let [, ...arr2] = arr

这将占用您的arr并将第一个元素写入任何地方（空白区域），同时使用扩展运算符将所有其余元素写入arr2 。

在 Svelte 的情况下，您可能希望您的 post 数组仍然是反应式的，因此您可以使用$标记分配

<script>
import AppBlogPost from "./PostCards/AppBlogPost.svelte";

export let posts;
$: [, ...otherPosts] = posts
</script>

<ul>
  {#each otherPosts as post}
    <AppBlogPost {post} />
  {/each}
</ul>

这也开辟了一种新的可能性，我猜您正在使用posts[0]以不同的方式显示第一篇文章？ 如果您将反应式语句更改为$: [firstPost, ...otherPosts] = posts您将它放在一个方便的变量中！

Answer 2

如果您的posts数组的成员发生更改，则不会被 svelte 看到。 您必须将值作为新值分配给您的posts数组，然后 svelte 将看到该数组已更改。

const remove=()=>{
  posts.splice(0,1)
  posts=[...posts]
}

Answer 3

Svelte 通过使用=运算符而不是变异检查赋值来检测需要重新渲染的位置。 例如：

// no change detected
const obj = { foo: 1 }
obj.bar = 2

// change detected
let obj = { foo: 1 }
obj = { ...obj, bar: 2 }

至于Array#splice ，它：

通过删除或替换现有元素和/或在适当位置添加新元素来更改数组的内容。

“就地”意味着它会改变数组并返回已删除的项目。

如果您熟悉 splice API 并想使用它，您可以在它之上构建一个不可变的版本：

const spliceImmutable = arr => (...args) => {
    const clone = [...arr]
    clone.splice(...args)

    return clone
}

let arr = [0, 1, 2, 3, 4]
arr = spliceImmutable(arr)(2, 1, null) // [0, 1, null, 3, 4]

或者使用基于Array#slice 的自定义逻辑（我认为更具可读性）：

let arr = [0, 1, 2, 3, 4]
arr = [ ...arr.slice(0, 2), null, ...arr.slice(3) ] // [0, 1, null, 3, 4]