React：更新相邻兄弟元素的状态答案

【问题标题】：React: Updating state of adjacent sibling elementsReact：更新相邻兄弟元素的状态
【发布时间】：2022-01-21 12:06:11
【问题描述】：

首先这里是example的codeandbox链接。

我在这里想要实现的是为<CellItem /> 组件设置 3 个状态，“active”、“inactive”、“semi-active ”。当我单击任何<CellItem /> 组件时，它会进入“active”状态并采用背景颜色。但是问题是，我还希望“相邻”单元格获得“半活动”状态并采用这些颜色的半透明版本。我怎样才能达到这个效果？

【问题讨论】：

标签： reactjs use-state

【解决方案1】：

我认为 React 对此的回答是 lifting state。

这在此处如何应用？

要将您的目标转化为行动，当一个单元格的状态变为“活跃”时，您希望它告诉周围的单元格他们的新状态是“半活跃”。

提升状态会说您的父组件App 应该保持每个单元格的状态。这是该组件初始状态的示例。为简单起见，两个单元格：

const cellData = [
  { colorName: "red", alpha: "(255,0,0,0.5)", state: "inactive" },
  { colorName: "blue", alpha: "rgba(0,0,255,0.5)", state: "active" },
]

当一个单元格被点击时，它会调用它收到的回调作为props，即handleClick(cellIndex)。父级中的该函数知道所有单元格，并且可以相应地更新其中的任何一个。

为什么这有用？

引用 React 文档：

通常，多个组件需要反映相同的变化数据。我们建议将共享状态提升到最接近的共同祖先。让我们看看它是如何工作的。

在这种情况下，父级可以“看到”所有单元格及其状态，并且知道每个单元格相对于其他单元格的位置。这使它处于正确的位置来决定所有单元格中的哪些是“活跃的”、“半活跃的”或“不活跃的”。

【讨论】：

那么，我是否在父级上使用一个包含 16 个元素的数组的 initialState？如果是这样，在这种情况下如何更改特定状态？
@EnesCeylan 您已经在迭代颜色，并读取 RGBA 中的颜色。这些可以组合成一个东西，也许是一个对象数组，其中还包含每个单元格的状态。
@EnesCeylan 我添加了一个示例数组，说明您的初始状态可能是什么样的。

【解决方案2】：

您可以将单元格“状态”保持在父级别，例如 Grid 组件，然后简化您的 cellItems，因此状态应该作为道具传递

或

您传入 2 个函数作为 props 以使选择事件 onSelect 冒泡，然后处理另一个事件。然后你让其他 cellItems 决定它们的状态是否应该改变。

您还描述了 on 行为，但是 off 呢？

类似这样的东西 - https://t976r.csb.app/

【讨论】：