时间戳

首页 > 解决方案 > React 共享状态：突出显示选择了哪个组件

javascript - React 共享状态：突出显示选择了哪个组件

问题描述

我对做出反应还很陌生，并且正在研究现有的大型代码库。

这个网站有一个组件列表（方形块），当我按下其中一个（比如 Block1）时，我希望那个（Block1）从白色变为蓝色背景色。如果我按下另一个块（例如 Block3），那么我希望前一个块（Block1）变回白色，而我刚刚选择的块（Block3）变回蓝色。

我有一个带有返回块列表的功能组件的列表文件，如下所示：

ItemList() {
   return ({edge.map() => return <Block />}) //this basically returns like 10 Blocks
}

块组件文件

Block() {
   return (<div> blah blah </div>)
}

对我来说最简单的方法是什么？我目前在 Block() 组件内部有一个状态，但是当我按下另一个块时，这不会让我更新，并且希望这个块变回来。

标签： javascriptreactjsstate

解决方案

  1. 状态selectedBlock应该存储在块中ItemList并传递给块
  2. ItemList应该向setSelectedBlock孩子发送一个函数，该函数将在 onClick 内部调用。
  3. 每个块都会从 map 函数中接收一个键
  4. 块内检查bgColor = props.key === props.selectedBlock ? 'blue' : 'white'
  5. 使用内联 CSS 应用颜色
  6. 随时提出任何问题！

推荐阅读