使用 React js 在特定索引处显示/隐藏元素答案

【问题标题】：Show/hide element at specific index with react js使用 React js 在特定索引处显示/隐藏元素
【发布时间】：2023-02-16 22:29:17
【问题描述】：

我正在使用 map 显示来自一组对象的卡片，我想只显示 onMouse 输入一些图标，但只显示在鼠标悬停的卡片上。现在，图标显示在所有卡片上

const onMousseEnter = (index) => {
   if (index === interestsList[index].id) {
     setVisibility(true);
   } 
 };

{interestsList
      .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
      .map((el, index) => (
        <InterestCard
          key={index}
          onMouseEnter={() => onMousseEnter(index)}
          onMouseLeave={() => onMouseLeave(index)}>
          <CategoryLeftCol onClick={openCatPage(index)}>
            <SurfingRoundedIcon sx={{ fontSize: 22 }} />
            <Typography variant="h6" fontWeight="bold">
              {el.name}
            </Typography>
          </CategoryLeftCol>
          {visible && (
            <CategoryRightCol>
              <IconButton onClick={() => setOpen(true)}>
                <Edit sx={{ fontSize: 14 }} />
              </IconButton>
              <IconButton onClick={() => setOpenAlert(true)}>
                <Delete sx={{ fontSize: 14 }} />
              </IconButton>
            </CategoryRightCol>
          )}

我可以获得鼠标悬停的卡的索引，但问题仍然存在......

【问题讨论】：

标签： javascript reactjs indexing iteration

【解决方案1】：

尝试为 interestsList 的每个索引创建一个新组件：

import { useState } from "react";

 
 {interestsList
       .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
       .map((el, index) => (
         <ChildComponent 
         index={index}
         el={el}
         key={index}
         />
        )}

function ChildComponent({el,index}){


    const [visible,setVisibility] = useState(false);


    const onMousseEnter = (index) => {
        if (index === interestsList[index].id) {
          setVisibility(true);
        } 
      };



    return (<InterestCard
           key={index}
           onMouseEnter={() => onMousseEnter(index)}
           onMouseLeave={() => onMouseLeave(index)}>
           <CategoryLeftCol onClick={openCatPage(index)}>
             <SurfingRoundedIcon sx={{ fontSize: 22 }} />
             <Typography variant="h6" fontWeight="bold">
               {el.name}
             </Typography>
           </CategoryLeftCol>
           {visible && (
             <CategoryRightCol>
               <IconButton onClick={() => setOpen(true)}>
                 <Edit sx={{ fontSize: 14 }} />
               </IconButton>
               <IconButton onClick={() => setOpenAlert(true)}>
                 <Delete sx={{ fontSize: 14 }} />
               </IconButton>
             </CategoryRightCol>)
}

【讨论】：