基于 prop 在 svelte 中循环

Question

我试图循环遍历并基于 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>

Answer 1

不确定你的版本到底是什么问题（我会改成 $: if(max) {...}）（原来它使用的是 var 而不是 let）但是如果你把onMount function it works >> 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>

Answer 2

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

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

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

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

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 属性时查看控制台。

基于 prop 在 svelte 中循环

Loop in svelte based on prop

javascript

svelte

svelte-component

App.svelte

Component.svelte