为什么react组件在使用map函数渲染到列表中时，悬停效果不起作用？

Question

我正在制作一个显示学生教育资格的布局。这是原型的布局：

资格按钮类中的两个 TextButton 没有显示预期的悬停效果，而“添加教育资格”按钮则显示预期的悬停效果，它们都是同一组件。

以下是该组件的实现：

import React from 'react'
import TextButton from "../../../components/buttons/TextButton";
import { MdEdit, MdDelete } from "react-icons/md";
import { IoMdAdd } from "react-icons/io";
import styles from '../StudentProfile.module.css'



const Education = (props) => {
  const {qualifications = [
    {
      name: "Master of Business Administration (MBA)",
      university: "Christ University",
      cgpa: 7.2,
      start: "May 2022",
      end: "April 2024",
      specialization: "Marketing",
    },
  
    {
      name: "Bachelor of Technology (B.Tech)",
      university: "Christ University",
      cgpa: 7.2,
      start: "May 2022",
      end: "April 2024",
      specialization: "Marketing",
    },
  ]}=props;

  return (
    <div className={`${styles["education-container"]}`}>
          <div className={styles["qualification"]}>
            <div className={`${styles["qualification-content"]}`}>
              <div className={`${styles["title"]}`}>
                <h2 className={styles["title2"]}>Educational Qualification</h2>
              </div>
              <div className={`${"qualification-add-button"}`}>
                <div className={`${styles["qualification-button"]}`}>
                  <TextButton
                    icon={<IoMdAdd />}
                    text="Add Educational Qualification"
                  />
                </div>
              </div>
            </div>
            <div className={styles["qualifications-list"]}>
                <div>
                <ol type="1">
                {qualifications.map((qualification, index) => (
                  <div key={index} className={`${styles["qualification-instance"]}`}>
                    <div key={index}vclassName={styles.maindiv}>
                      <li key={index} className={`${styles["education"]}`}>
                        <h3 className={styles["qualification-name"]}>
                          {qualification.name}
                        </h3>

                        <p>{qualification.university}</p>
                        <p>CGPA: {qualification.cgpa}</p>
                        <p>
                          {qualification.start} - {qualification.end}
                        </p>
                        <p>Specialization: {qualification.specialization}</p>
                      </li>
                    </div>
                    <div className={`${styles["qualification-mod-buttons"]}`}>
                      <div className={`${styles["qualification-button"]}`}>
                      <TextButton icon={<MdEdit />} text="Edit" />
                      </div>
                      <div className={`${styles["qualification-button"]}`}>
                        <TextButton icon={<MdDelete />} text="Delete" />
                      </div>
                    </div>
                  </div>
                ))}
              </ol>
                </div>
             
            </div>

          </div>
        </div>
  )
}

export default Education

Answer 1

我在您的代码中发现了语法错误，这可能是导致 CSS 无法工作的原因。换线

<div key={index}vclassName={styles.maindiv}>

到

<div key={index} className={styles.maindiv}>

此外，您还对包含按钮的元素使用不同的 CSS

classNames

。一次

qualification-add-button

，一次

qualification-mod-buttons

。也可能与 CSS 未按预期工作有关。

Answer 2

检查 CSS 类应用

您的 React 组件中有一个拼写错误。 map 函数内的一个 div 中的 className 属性在 className 前面有一个额外的“v”

 <div key={index}vclassName={styles.maindiv}>

应更正为：

<div key={index} className={styles.maindiv}>