Div出现并消失在“反应钩”中。

Question

我想要一个像(在onclick之前)(在oncilck之后).Just这样的效果，点击哪个div使它消失，然后让消失的div在再次显示之前。

这是数据代码(只是一个数组)。我想要数据中的“显示”变量来控制是否要执行display.But，我不知道如何在click函数中实现对数组的析构分配。

谢谢你的回答！

const leftBarData=
[{
    name:"关于音乐",
    color:"bg-music-color",
    icon:<div className="iconMusicSize">
        <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            blahblah
        </svg>
    </div>,
    link:"/music",
    number:0,
    show:true,
},
    {
        name:"关于编程",
        color:"bg-code-color",
        icon:<div className="iconSize">
            <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                blah
            </svg>
        </div>,
        link:"/code",
        number:1,
        show:true,
    },
    {
        name:"关于设计",
        color:"bg-design-color",
        icon:<div className="iconSize">
            <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                blah
            </svg>
        </div>,
        link:"/design",
        number:2,
        show:false
    },
    {
        name:"关于本人",
        color:"bg-about-color",
        icon:<div className="iconSize">
            <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                blah
            </svg>
        </div>,
        link:"/design",
        number:3,
        show:true
    }
]

这是地图。

const [statusData,setStatusData]=useState(leftBarData)
const changeBar=(pars)=>
    {
        how to achieve it
    }

<div className="flex fixed">
        {statusData?.map((index,i)=>(
            <Link to={index.link}>
                <div className={` ${index.color} ${index.show?"":"hidden"} w-99 h-screen pt-9 `} onClick={()=>changeBar(index)}>
                    <div className="flex flex-col h-full items-center justify-between">
                            {index.icon}
                        <div className="-rotate-90 -translate-y-full mb-10">
                            <div className="h3 text-white whitespace-nowrap">{index.name}</div>
                        </div>
                    </div>
                </div>
            </Link>
        ))}
    </div>

Answer 1

您可以使用map()状态数据来切换单击元素的show属性，如下所示：

const changeBar = pars => {
    setStatusData(data => data.map(item => (
        item === pars
        ? {
            ...item,
            show: !item.show
        }
        : item
    )));
};