Javascript 苗条-有没有一种方法可以在内部使用JS？

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

我知道我可以创建一个新组件并将数组条目传递给I，然后在该子组件中进行处理，或者我可以添加一个helper函数

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>

---

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

通过这种方式，您可以使用映射“This”添加可选参数，并使用从映射函数返回的[…]使用其他循环变量

例如：

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

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

{/each} 

外部处理功能示例：

function extraProcessing(entry, idx) {

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

return [entry, arg2, arg3]

---

与您的示例一起使用。

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

通过这种方式，您可以使用映射“This”添加可选参数，并使用从映射函数返回的[…]使用其他循环变量

例如：

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

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

{/each} 

外部处理功能示例：

function extraProcessing(entry, idx) {

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

return [entry, arg2, arg3]

---

还有一个例子。

如果您只想激活一个类，那么如果条目有子菜单属性，那么您可以使用一个条件类

<style>
    .has-submenu {/* your conditional css */}
</style>

<div class="Menu">
  {#each menuEntries as entry, i }      
      <div
          class={"menu-entry " + entry.classes}
          class:has-submenu={entry.submenu}
      >
          ...
      </div>
  {/each}
</div>

.有子菜单{/*您的条件css*/}
{#每个菜单项作为条目，i}
...
{/每个}

---

请注意，

class:has submenu={entry.submenu}

的计算结果为true，并且仅当entry.submenu本身为truthy（非null、未定义、0等）时才激活该类，因此，如果这是一个问题，您应该直接检查属性是否存在

如果您只想激活一个类，那么如果条目有子菜单属性，您可以使用条件类

<style>
    .has-submenu {/* your conditional css */}
</style>

<div class="Menu">
  {#each menuEntries as entry, i }      
      <div
          class={"menu-entry " + entry.classes}
          class:has-submenu={entry.submenu}
      >
          ...
      </div>
  {/each}
</div>

.有子菜单{/*您的条件css*/}
{#每个菜单项作为条目，i}
...
{/每个}

---

请注意，

class:has submenu={entry.submenu}

的计算结果为true，并且仅当entry.submenu本身为truthy（非null、未定义、0等）时才激活该类，因此，如果这是一个问题，您应该直接检查属性是否存在

另一个解决方案是使用一个小巧的组件来处理数据并使用插槽返回结果

您可以添加一个名为Process.svelte的组件，该组件接收参数和函数，调用函数的结果将在插槽属性中提供

<script>
    export let args = {}
    export let process
</script>

<slot res={process(args)}/>

导出let args={}
导出let过程

导入过程

<script>
    import Process from './Process.svelte'
    let menuEntries = []
</script>

<div class="Menu">
  {#each menuEntries as entry, i }
      <Process process={() => {
      let a= entry.classes;
      if (entry.submenu) {
        a+= ' has-submenu';
      }
      return a; // the return value can be accessed by the children via let:res
     }} let:res>
                <div class="menu-entry {res}">...</div>
       </Process>
  {/each}
</div>

从“./Process.svelte”导入进程
让menuEntries=[]
{#每个菜单项作为条目，i}
{
设a=entry.class；
如果（输入子菜单）{
a+='有子菜单'；
}
return a；//子级可以通过let:res访问返回值
}}let:res>
...
{/每个}

另一种解决方案是使用小巧的组件来处理数据并使用插槽返回结果

您可以添加一个名为Process.svelte的组件，该组件接收参数和函数，调用函数的结果将在插槽属性中提供

<script>
    export let args = {}
    export let process
</script>

<slot res={process(args)}/>

导出let args={}
导出let过程

导入过程

<script>
    import Process from './Process.svelte'
    let menuEntries = []
</script>

<div class="Menu">
  {#each menuEntries as entry, i }
      <Process process={() => {
      let a= entry.classes;
      if (entry.submenu) {
        a+= ' has-submenu';
      }
      return a; // the return value can be accessed by the children via let:res
     }} let:res>
                <div class="menu-entry {res}">...</div>
       </Process>
  {/each}
</div>

从“./Process.svelte”导入进程
让menuEntries=[]
{#每个菜单项作为条目，i}
{
设a=entry.class；
如果（输入子菜单）{
a+='有子菜单'；
}
return a；//子级可以通过let:res访问返回值
}}let:res>
...
{/每个}

。。。。。。