反应打开和关闭突出显示答案

【问题标题】：React on and off highlight反应打开和关闭突出显示
【发布时间】：2021-12-31 08:59:18
【问题描述】：

大家新年快乐，我有一个以折叠方式显示的数据列表，我只想在列表中的用户每次点击时突出显示它，但突出显示时一次一个

为了更好地理解，请查看此示例

https://codesandbox.io/s/list-highlight-demo-forked-ww0op

const [highlight, setHighlight] = useState(false)
const handleClick = () => {
   if (on) set(null)
   else set(index)
}
  <Collapse in={viewLocationList} sx={{ my: '2px' }}>
    {!!searchParameter && (
      <Box className="rounded-scrollbar widget-result-container"
      onClick={handleClick}
      sx={{
        my: 1,
        bgcolor: on && "lightgrey",
        "&:hover": { bgcolor: on && "lightgrey" }
      }}
      >
        {filteredLocations.map((location, key, on) => (
          <LocationWidgetItem
            key={key}
            location={location}
            onClickLocation={setActiveLocation}
            index={key} on={highlight === key} set={setHighlight}
          />
        ))}
      </Box>
    )}
  </Collapse>

这是当前代码的错误

【问题讨论】：

你能解释一下你期望你的输出会发生什么吗？
我想一次突出结果 1，
我不确定我是否理解，它似乎正在工作。你能解释更多吗？
我想将示例中的功能应用到我的代码中，唯一的问题是我不知道如何将示例中的代码与我当前的代码对齐
你的 handleClick 方法放错地方了。把它放在 LocationWidgetItem 里面

标签： css reactjs material-ui

【解决方案1】：

很可能，您没有像示例中那样将“on”道具从父组件传递到您的项目组件。

【讨论】：

你好兄弟，我刚刚更新了我的问题

【解决方案2】：

您的沙盒是正确的。不同之处在于您试图从不存在的 filteredLocations 映射中传递 on 道具。甚至不需要，因为稍后您将声明 on 与 highlight === key 比较。

代替

{filteredLocations.map((location, key, on) => (...)}

尝试使用以下方式呈现您的列表：

{filteredLocations.map((location, key) => (...)}

【讨论】：