Svelte - 每个循环中的非平凡中间变量
Svelte - non-trivial intermediate variable within each loop
如何像在 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>
您可以使用 {@const}
指令,这是最近添加到 Svelte 中的指令。在您的用例中:
<ul>
{#each myArray as item}
{@const subArray = item.items.filter(i => i > 0)}
<li>
{#each subArray as subItem}
...
{/each}
</li>
{/each}
</ul>
如果不是太复杂可以直接修改里面的数组{#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
如何像在 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>
您可以使用 {@const}
指令,这是最近添加到 Svelte 中的指令。在您的用例中:
<ul>
{#each myArray as item}
{@const subArray = item.items.filter(i => i > 0)}
<li>
{#each subArray as subItem}
...
{/each}
</li>
{/each}
</ul>
如果不是太复杂可以直接修改里面的数组{#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