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

Question

首先是 example 的 codesandbox link。

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

Answer 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 文档：

Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor. Let’s see how this works in action.

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

Answer 2

您要么将单元格“状态”保留在诸如网格组件之类的父级别，并简化您的单元格项目，以便状态应作为道具传入

或

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

您还描述了打开时的行为，但是关闭时呢？

像这样 - https://t976r.csb.app/

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

React: Updating state of adjacent sibling elements

reactjs

use-state

这在此处如何应用？

为什么这有用？