在React.js的侧边栏中激活所选项目可以通过以下步骤实现:
以下是一个示例代码:
import React, { useState } from 'react';
const Sidebar = () => {
const [activeItem, setActiveItem] = useState(null);
const handleItemClick = (item) => {
setActiveItem(item);
};
const projectList = ['项目1', '项目2', '项目3'];
return (
<div className="sidebar">
{projectList.map((item) => (
<div
key={item}
className={`sidebar-item ${activeItem === item ? 'active' : ''}`}
onClick={() => handleItemClick(item)}
>
{item}
</div>
))}
</div>
);
};
export default Sidebar;
在上述示例中,我们使用useState钩子来创建一个名为activeItem的状态变量,并使用setActiveItem函数来更新该状态。在handleItemClick函数中,我们将所选项目作为参数,并将其设置为activeItem的新值。
在侧边栏组件的返回部分,我们使用map函数遍历项目列表,并为每个项目创建一个div元素作为列表项。我们根据activeItem的值来动态添加或移除active类,以实现所选项目的激活效果。
请注意,上述示例中的CSS类名和样式仅供参考,您可以根据自己的需求进行调整。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云云数据库MySQL版、腾讯云对象存储(COS)。
腾讯云产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云