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

Question

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

我正在尝试运行一个 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

如果 posts 数组的成员发生变化，svelte 将看不到它。您必须将新值分配给 posts 数组，然后 svelte 会看到数组已更改。

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

Answer 2

Svelte 通过使用 = 运算符检查 assignment 来检测需要 re-renders 的位置，而不是突变。例如：

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

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

至于Array#splice，则：

changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

“就地”意味着它改变数组和 returns 删除的项目。

如果您熟悉拼接 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]

Answer 3

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

let [, ...arr2] = arr

这将带走你的 arr 并将第一个元素写到任何地方（空的 space），同时使用扩展运算符将所有其余元素写到 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] 以不同方式显示第一个 post？如果您将响应式语句更改为 $: [firstPost, ...otherPosts] = posts，您可以将其保存在一个方便的变量中！

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

How do I shift a prop array on Svelte?

javascript

svelte