如何在 Elm 0.17 中一次突出显示单个组件？答案

【问题标题】：How can I keep a single component highlighted at a time in Elm 0.17?如何在 Elm 0.17 中一次突出显示单个组件？
【发布时间】：2016-10-31 05:47:35
【问题描述】：

我有一个包含各种组件的游戏 UI，其中一些可以单击以突出显示（“活动”组件）。目前，这是通过在可以突出显示的每个组件的状态中设置一个 Bool 来完成的。但是，我想强制一次只能突出显示一个组件 - 因此，如果单击某些内容，则当前突出显示的其他任何内容都必须更新为取消突出显示。

做到这一点的一种方法是让共同的祖先向所有不同的孩子广播一些消息，每个组件都可以处理这个消息并关闭自己 - 但是这看起来非常复杂和浪费。可能有 1000 个组件，只有两个在变化（一个突出显示，一个取消突出显示），那么为什么要发送和处理 1000 条消息？

有没有更好的办法？

注意：这似乎与Elm 0.17: How to subscribe to sibling/nested component changes 非常相似。我认为一个区别是，在那个问题中，相关的组件数量很少，当一个组件发生变化时，另一个总是会发生变化。在我的例子中，整个模型的不同位置有很多组件，当其中一个发生变化时，其他的很少或根本不会发生变化。

【问题讨论】：

标签： elm

【解决方案1】：

是的，可能有更好的方法。不建议在应用程序的多个位置复制某些状态，因为这会导致同步问题并使调试更加困难。

相反，您最好不要将突出显示的状态存储在组件中，而仅存储在主模型中。然后组件的视图函数将采用一个额外的布尔“突出显示”参数。

要将突出显示的状态存储在主模型中，您可以为每个组件指定一个 ID，并将 highlighted : Maybe ID 添加到模型中。

因此，您只需将点击消息从子级传播到父级，而不需要从父级传播到子级。

【讨论】：

【解决方案2】：

Elm 运行时和虚拟 DOM 引擎将确保仅重新渲染更改的组件。所以我不会太担心向 1000 个组件发送消息。

在你的情况下：

您的更新功能将仅更改 2 个组件以设置/取消设置活动状态/仅向 2 个组件发送消息。
您的视图函数将始终为所有 1000 个组件运行
Elm 的虚拟 DOM 差异引擎将仅渲染更改为 DOM 的 2 个组件。

当使用具有内部状态的组件时，您需要的是：

每个组件都需要知道它是否处于活动状态。可能是Bool。可以是组件的 model 中的一个字段。
全局model 需要知道哪些组件处于活动状态。可能带有Maybe Int，其中Int 是活动组件的ID。
当一个组件被点击激活它时，它会发送一些Msg给父组件，其中应该包含它的ID，这样父组件就知道哪个组件现在是激活的。（请参阅 example here 了解其工作原理）
父级的update 函数在收到消息元素时更新它自己的model 中的活动元素。父组件更新 1 或 2 个子组件以更改这些组件的活动标志。

【讨论】：