Svelte

Question

如何像在 React 中一样在 Svelte 的 HTML 中创建变量，或者我根本不应该如何使用 Svelte。我知道下面的例子很简单，但我正在考虑这样一种情况，我真的需要 subArray 的一些重逻辑（不能使用单行）

反应

<ul>
  {myArray.map((item) => {
    const subArray = item.items.filter(i = i > 0) // <- how can I have an intermediate variable like this in Svelte?
    return <li>{subArray.map(...)}</li>
  }}
</ul>

苗条

<ul>
  {#each myArray as item}
    <li>
        {#each <complex-logic> as subItem}
        ...
        {/each}
    </li>
  {/each}
</ul>

Answer 1

您可以使用 {@const} 指令，这是最近添加到 Svelte 中的指令。在您的用例中：

<ul>
  {#each myArray as item}
    {@const subArray = item.items.filter(i => i > 0)}
    <li>
        {#each subArray as subItem}
        ...
        {/each}
    </li>
  {/each}
</ul>

Answer 2

如果不是太复杂可以直接修改里面的数组{#each}

<script>
    let myArray = [
        {id: 1, items: [-2,-1,0,1,2]},
        {id: 2, items: [-20,-10,0,10,20]},
        {id: 3, items: [-222,-111,0,111,222]},
    ]
</script>

<ul>
    {#each myArray as item}
    <li>
        {item.id}:
        {#each item.items.filter(item => item >= 0) as subItem}
        {subItem}, 
        {/each}
    </li>
    {/each}
</ul>

或者您可以使用新的 {@const} directive

<ul>
    {#each myArray as item}
    {@const filteredItems = item.items.filter(i => i > 0)} 
    <li>
        {item.id}:
        {#each filteredItems as subItem}
        {subItem}, 
        {/each}
    </li>
    {/each}
</ul>

如果它更复杂，为什么不将逻辑提取到一个函数中

    function complicatedModification(arr) {
        return arr.filter(item => item > 0)
    }
</script>

...
  {#each complicatedModification(item.items) as subItem}
        {subItem}, 
  {/each}
...

这是一个包含所有选项的 REPL

Svelte - 每个循环中的非平凡中间变量

Svelte - non-trivial intermediate variable within each loop

svelte-component