基于 prop 在 svelte 中循环

Posted 2023-03-07

【中文标题】基于 prop 在 svelte 中循环

【英文标题】：Loop in svelte based on prop

【发布时间】：2021-12-26 03:59:26

【问题描述】：

我试图循环遍历并根据 svelte 中的道具初始化字典，但到目前为止似乎不可能。一定有办法做到这一点吗？

<script>
    export let max;
    let map = ;
    $: if(max != undefined)
      for(var i=0; i<max; i++)
        if(i<5) 
          map["id_"+i] = 1;
        
        else 
          map["id_"+i] = -1;
        
      
    
</script>

<p>max</p>

【参考方案1】：

Corrl 的版本有效，但有一个重要的警告：如果您即时更改 max 属性，您的数组将不会更新，因为组件不会被销毁和重新安装，因此您的数组例程将不会运行再次。

也许这是你的意图，也许不是。

响应式版本将保持数组更新。但是，在处理响应式语句时，我的建议始终是使这些语句尽可能简单。

解决您的问题的更简洁的方法是将您的数组构建例程移动到一个简单的函数中，该函数接受 max 值作为输入并返回初始化的数组：

function makeMap(max) 
  const map = 
  for(var i=0; i<max; i++)
    if (i<5) 
      map["id_"+i] = 1
     else 
      map["id_"+i] = -1
    
  
  return map

那么你的响应式代码就变得非常简单了：

$: map = makeMap(max)

遵守基本的反应式分配规则，左侧为反应式变量 (map)，右侧为依赖项 (max)。

Here is a REPL 展示了通过响应式语句更新数组和通过onMount 初始化数组之间的区别。在通过单击 + 按钮更改传递给组件的 max 属性时查看控制台。

【参考方案2】：

不确定您的版本到底有什么问题（我会更改为$: if(max) ...）（原来是使用var 而不是let）但是如果您将功能放在onMount 函数中它有效>>REPL

App.svelte

<script>
    import Component from './Component.svelte'
</script>

<Component max=20/>

Component.svelte

<script>
    import onMount from 'svelte'
    export let max;
    let map = ;
    
    onMount(() =>          
      for(var i=0; i<max; i++)
        if(i<5) 
          map["id_"+i] = 1;
        
        else 
          map["id_"+i] = -1;
        
      
    console.log(map)
    )

</script>

<p>max</p>

【讨论】：

这就是我要找的，谢谢。再看一遍之后，我怀疑如果var i = 0 变成let i = 0，我的原始代码会起作用。