Svelte - 有没有办法在#each 中使用 JS？

Question

我正在迭代一个数据数组，我想在渲染它之前对其进行一些处理。

我知道我可以创建一个新组件并将数组条目传递给 i，并在该子组件中进行处理，或者我可以添加一个辅助函数getClass(entry)，或者我可以内联一个十元运算符，

但我想知道是否有一种方法可以做这样的事情，将一些代码内联到每个块中。非功能性示例：

<div class="Menu">
  {#each menuEntries as entry, i }
    {{ 
      let classes = entry.classes;
      
      if (entry.submenu) {
        classes += ' has-submenu';
      }
     }}
      
      <div class="menu-entry {classes}">...</div>
  {/each}
</div>

编辑：

这似乎是一个像这样的解决方法。唯一的事情是classes必须在循环之前定义。

<script>
let classes = '';
</script>
<div class="Menu">
  {#each menuEntries as entry, i }
    {(() => {
      classes = entry.classes;
      
      if (entry.submenu) {
        classes += ' has-submenu';
      }
      return ''; // return empty string so Svelte does not print it
     })()}
      
      <div class="menu-entry {classes}">...</div>
  {/each}
</div>

Answer 1

对于那些需要在#each块内进行一些计算的人可以使用@const语句。

<script>
  const items = ['a', 'b', 'c'];
</script>

{#each items as item}
  {@const exclamationMark = item + '!'}

  <p>{exclamationMark}</p>
{/each}

Answer 2

您可以使用 Array.map 函数进行一些额外的处理。

这样，您可以使用映射“this”添加可选参数，并使用从映射函数返回的 [....] 来使用其他循环变量。

例子：

{#each menuEntries.map(extraProcessing, thisArg) as [entry, arg2, arg3] , i }

  ... loop using entry, arg2, arg3, i

{/each} 

extraProcessing 函数示例：

function extraProcessing(entry, idx) {

   ... do something using: entry, idx and this (thisArg)

return [entry, arg2, arg3]

这里有一个包含您示例的REPL 。