在任何给定时间突出显示列表中的一项（默认情况下索引 0）

Question

抱歉这个可怕的标题，我一辈子都想不出如何表达这个问题。默认情况下，我希望突出显示列表中的第一项，并在鼠标悬停在其他项上时突出显示其他项。这工作正常，我很好奇我如何能够在突出显示另一个项目时删除该初始项目的突出显示，我知道我需要处理我的 parent 组件（列表）中的状态，但我无法弄清楚。

这是我的列表项，其中包含一些基本状态管理以显示给定项是否突出显示。

export default function Item ({ title, onClick, selected, i }) {
  const [highlight, setHighlight] = useState(false)

  return (
    <ListItem
      i={i}
      key={title}
      selected={selected}
      onClick={onClick}
      onMouseEnter={() => setHighlight(true)}
      onMouseLeave={() => setHighlight(false)}
      // i === 0 && no other item is highlighted (need to get this state from the list component)
      highlight={highlight || i === 0}
    >
      {title}
    </ListItem>
  )
}

Parent 组件接收 'list' 并将该列表中的每个项目映射到上述组件（项目）：

export default function List ({ list, onClick, selected, render }) {s
  return (
    <div>
      {render ? (
        <ListContainer>
          {list.map((item, i) => (
            <Item
              i={i}
              key={item.title}
              title={item.title}
              onClick={() => onClick(item.title)}
              selected={selected(item.title)}
            />
          ))}
        </ListContainer>
      ) : null}
    </div>
  )
}

这是一个显示当前实现的 Gyazo link，我想要实现的是当鼠标进入另一个索引不等于 0 的项目时，该初始项目不再突出显示。

Answer 1

你可以用 css

ul:not(:hover) li:first-of-type,
ul li:hover {
  background-color: red;
}

第一个将在未悬停时突出显示，另一个将在悬停时突出显示，"cancel" 第一个。

假定所选的将排在列表的顶部。

Answer 2

您需要将您的高亮状态提升到父 List 组件

function List ({ list, onClick, selected, render }) {
  const [highlightIndex, setHighlightIndex] = setState(0);
  return (
    <div>
      {render ? (
        <ListContainer>
          {list.map((item, i) => (
            <Item
              i={i}
              key={item.title}
              title={item.title}
              onClick={() => onClick(item.title)}
              selected={selected(item.title)}
              highlightIndex={highlightIndex}
              setHighlightIndex={setHighlightIndex}
            />
          ))}
        </ListContainer>
      ) : null}
    </div>
  )
}

function Item ({ title, onClick, selected, i, highlightIndex, setHighlightIndex }) {
  return (
    <ListItem
      i={i}
      key={title}
      selected={selected}
      onClick={onClick}
      onMouseEnter={() => setHighlightIndex(i)}
      highlight={i === highlightIndex}
    >
      {title}
    </ListItem>
  )
}

在任何给定时间突出显示列表中的一项（默认情况下索引 0）

Highlight One Item in a List at any given time (Index 0 by default)

javascript

list

highlight

reactjs