javascript - 在 React 中的 .map 迭代中的单个元素上使用 onMouseEnter

Question

我试图在从 .map 数组返回的项目列表上实现悬停操作。我希望悬停只影响一个元素，而不是影响所有元素。这是我的代码。

import { MDBTable, MDBTableHead, MDBTableBody, MDBCol, MDBCard, MDBCardBody } from "mdbreact";
import { Paper, Box } from '@material-ui/core';
import { withStyles, makeStyles } from '@material-ui/core/styles';
import { motion } from 'framer-motion'
import { useState, useEffect } from 'react'


const packageDetails = [...]  
    
export default () => {
    let [elevation, setElevation] = useState(1);

    useEffect(() => {
        
    })
    
    return(
    <Box className="container pt-3 mt-5 mb-5 ">
        <h1 className="text-center pb-5">NOTRE TABLEAU DE PRIX</h1>
        <Box className="row">
        
        {packageDetails.map( (packageDetail, index) => 
        
        <div  className="col-md-3 col-sm-6 col-xs-12 mb-5 ">
        <Paper  elevation={elevation} className="single-table" onMouseEnter={() => setElevation(prevElevation => 5)} onMouseLeave={()=> setElevation(prevElevation => 2)}>
        <MDBTable>
            <MDBTableHead>
                <tr className="package-name-holder">
                    <th className="text-uppercase text-center">{packageDetail.name}</th>
                </tr>
            </MDBTableHead>
                <MDBTableBody>
                    <tr>
                    <th>{packageDetail.price} FCFA/AN</th>
                    </tr>
                    <tr>
                    <td>{packageDetail.space}</td>
                    </tr>
                    <tr>
                    <td>{packageDetail.bandwidth}</td>
                    </tr>
                    <tr>
                    <td>{packageDetail.domain}</td>
                    </tr>
               
                </MDBTableBody>
        </MDBTable>
        </Paper>
        </div>
        )}
        </Box>
        <style jsx>{`
            .package-name-holder {
                background: linear-gradient(90deg, rgba(65,176,212,1) 0%, rgba(113,201,219,1) 83%, rgba(0,212,255,1) 100%);
                color: #fff;
            }
        `}</style>
    </Box>
    );
}

欢迎任何解决方案，如果我问得不好，抱歉。 谢谢。

Answer 1

您应该依赖 packageDetails 数组中的数据。因此，如果您想在第一个元素上使用鼠标效果，只需使用如下所示的内容:

<Paper
  elevation={elevation}
  className="single-table"
  onMouseEnter={index === 0 ? () => setElevation(prevElevation => 5) : () => {}}
  onMouseLeave={index === 0 ? () => setElevation(prevElevation => 2) : () => {}}
>

这只是一个未优化的代码，例如使用 lodash 包中的 noop 而不是 () => {}