在你的代码中,setActive(item1.goodsInfo.goodsId)
用于设置当前活动的商品 ID。点击当前高亮的项应该不会有问题,但要注意几个地方:
条件判断: 你的条件判断中的逻辑似乎有点问题。在
className
中,如果active
等于item1.goodsInfo.goodsId
,那么你为该元素添加了'home-popup-popupItem-content-subItem '
的类名,而不是'home-popup-popupItem-content-subItem active '
。通常情况下,我们希望添加一个表示”激活”状态的类名。状态更新: React 的状态更新是异步的,因此如果在
console.log(e, active, item1.goodsInfo.goodsId)
中使用active
,你可能会看到上一个值而不是最新的值。可以将其放在useEffect
钩子中监听active
的变化,以便查看最新状态。onClick 事件: 这里没有什么明显的问题,当你点击一个项目时,它应该能够正确地更新状态并根据新的活动 ID 渲染样式。
修正后的代码可能如下所示:
{item?.subNode?.map((item1, index1) => (
<div
className={`${
active === item1.goodsInfo.goodsId
? 'home-popup-popupItem-content-subItem active'
: 'home-popup-popupItem-content-subItem'
}`}
key={index1}
onClick={(e) => {
setActive(item1.goodsInfo.goodsId);
console.log(e, item1.goodsInfo.goodsId); // log the clicked item's id
}}
>
{/* Render your content here */}
</div>
))}
此外,你可以考虑使用其他方法来确保高亮效果,例如使用 CSS 类来控制样式,并确保任何过渡或动画正常工作。如果遇到具体的问题,请提供更多上下文,我会更好地帮助你!
内容由零声教学AI助手提供,问题来源于学员提问