reactjs 响应打开和关闭高光

kmpatx3s  于 2023-03-12  发布在  React
关注(0)|答案(2)|浏览(115)

我有一个显示在Collapse中的数据列表,我只希望用户每次单击列表时都突出显示该列表,但***突出显示时一次一个***
为了更好地理解,请参阅此示例
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>

这是当前代码的错误

qjp7pelc

qjp7pelc1#

最有可能的是,您没有像示例中那样将“on”属性从父组件传递到项目组件。

kq0g1dla

kq0g1dla2#

您的沙箱是正确的。不同之处在于您试图从不存在的filteredLocationsMap传递on属性。它甚至不需要,因为稍后您将声明onhighlight === key的比较。
代替

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

尝试呈现你的列表:

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

相关问题