Svelte 3:通过道具进行子级与父级通信的数组

Question

Svelte 3：道具和子组件数组

我计划在六边形瓷砖上编写一个棋盘游戏，基于优秀的redblobgames文章，并使用 Svelte 3/Sapper 编码。

我的问题是关于孩子通过道具与父母之间的沟通。我以前在旧版本的 Svelte 中使用商店这样做过，但我想没有它也可以做到这一点。

支持我有一块赫克萨贡斯 SVG 瓷砖板。每个磁贴的形式为：

<script>
// 3D coordinate system, see: http://redblobgames.org for details
export let hex = { q:0, r:0, s: 0 }    
export let center = { x:0, y: 0 }
export let corners = []
export let selected = false
let points = corners.map (c => `${c.x.toFixed(0)},${c.y.toFixed(0)}`).join (' ')
// changed by selection process (colors...)
let inner_class = "inner_tile"
const toggle_select = () => {
selected = !selected
}
</script>
<g class="tile" on:click="[ () => toggle_select() }"
<polygon class={ inner_class} [ points } />
<!-- more sophisticated things -->
<!-- sprites, lbels, masks and animations  -->
</g>

编辑器组件负责从我的 redblobgames 六边形处理库的自定义实现中选择布局，设置 SVG 容器并使用磁贴填充网格。Tis 只是一个调用十六进制组件的每个语句：

<svg 
xmlns="www.w3.org/2000/svg"
viewBox="-50 -50 589 949" 
width="420"
height="500"
>
<!-- just a debugging purpose rectagle ! -->
<rect x="0" y="0" width="400" height="500" style="fill: none; stroke: black;"/>

<g class="tiles">
{#each tiles  as tile }
<Hex {...tile} />
{/each}
</g>  
</svg>
<!-- this helping zone keeps empty, sadly, whatever I attempt to do -->  
<textarea cols="50" rows="10">
{ selected_tiles_output }
</textarea>

当尝试在电路板下方的 teextarea 上显示选定的磁贴引用 (q，r，s( 时出现问题。在脚本中执行此操作不起作用：

// imports...
let tiles = []
let selected_tiles = new Set ()
let selected_tiles_output = ''
// onMount to assemlble the board ...
// reactive part which doesn't work:
$: selected_tiles_ouptut = tiles
.filter (tile => tile.selected)
.map (tile => tile.hex)
.map (h => `q: ${h.q}, r: ${h.r}, s: ${h.s} n`)
.reduce ((acc, val) => acc + val, '')

问题：

父容器是否有可能在子组件中的一种"柯里"道具数组中观察到某个道具(又名"选定"(？

• 或-

我最终应该考虑使用商店来代替吗？

注意：在开发的这一点上，我很难分享一些完整的工作代码示例或源代码，因为它正在大量变化。在最坏的情况下，我可以压缩并通过邮件发送 src/routes 和 src/components sapper 的文件夹！

有没有人有想法让我走正确的路？

问候，赫弗斯特。

Answer 1

您可以使用bind:指令让父级接收来自子级的反应式更新 - 在此处查看文档

看起来您可以在将磁贴传递给十六进制时绑定磁贴，如下所示：

{#each tiles as {hex, center, corners, selected} }
<Hex {hex} {center} {corners} bind:selected />
{/each}

然后Editor.svelte应该在Hex.svelte中更改tile.selected时获得更新。

---

或者，您可以在父Editor而不是Hex中定义toggle_select，并将其作为道具传递给Hex。这样，磁贴的更新直接发生在Editor中：

<!-- Editor.svelte -->
<g class="tiles">
{#each tiles  as tile }
<Hex {...tile} toggle_select={() => tile.selected = !tile.selected} />
{/each}
</g>  

<!-- Hex.svelte -->
<script>
export let toggle_select

希望对您有所帮助！