悬停时一个人的显示元素

Question

我正在呈现一份学生名单，其中一些学生考试不及格。对于那些考试不及格的人，我在他们的头像后面显示一个红色方块。

每当我将鼠标悬停在学生的头像上时，我都想显示该学生失败的科目。我现在的问题是，我向所有学生展示subjects，而不仅仅是我徘徊过的那个。

如何仅显示我悬停在其头像上的学生的mainSubject？

这里有一个链接到我的代码沙盒：示例链接

Answer 1

我像下面这样解决了它。

• 获取悬停学生的id。从你提供的学生列表中匹配此id。如果匹配，则显示受试者
• 此外，我将钩子重命名
• 添加关键道具

您也可以检查https://codesandbox.io/s/zealous-bhaskara-mi83k

const [hoveredStudentId, setHoveredStudentId] = useState();
return (
<>
{students.map((student, i) => {
return (
<div className="student-card" key={i}>
<p>
{student.firstName} {student.lastName}
</p>
{student.passed === false ? (
<>
<img
id={student.id}
src={student.picture}
className="student-avatar fail"
onMouseEnter={e => {
setHoveredStudentId(e.currentTarget.id);
}}
onMouseLeave={e => {
console.log(e.currentTarget.id);
setHoveredStudentId(0);
}}
alt="avatar"
/>
{hoveredStudentId === student.id && (
<div className="subject-label">{student.mainSubject}</div>
)}
</>
) : (
<img
src={student.picture}
className="student-avatar"
alt="avatar"
/>
)}
</div>
);
})}
</>
);

Answer 2

问题是您有一个学生列表，但只有一个显示/隐藏主题的标志。

解决方案：1

维护旗帜/学生名单。所以你会有n个学生的标志。实现这一点的简单方法是以某种方式拥有状态：

IStudentDetails { ... }
IStudentStateMap {
id: string; // uniquely identify a syudent
isSubjectVisible: boolean;
}

并基于此标志isSubjectVisible切换可见性。

更新代码

---

解决方案2:

与其使用React来处理它，不如使用CSS技巧。请注意，这是一个补丁，可以避免。

理念：

• 将Student包装在容器元素中，并在需要悬停显示的元素上的元素上添加一个类onHover
• 然后使用CSS来显示/隐藏这些元素

.student-container .onHover {
display:none;
}
.student-container:hover .onHover{
display: block;
}

这样就不会有重发器，也不需要标志。

更新的代码

---

然而，解决方案1更好，因为你有更多的控制权，当你使用UI库时，最好让它进行所有突变，你应该遵循它的方式。