如何跟踪活动标签（黄色突出显示）和显示链接对应的链接（红色突出显示）？
我在nextjs中创建了一个多层次的导航栏，我试着在mouseEnter和leave上使用，但是事情没有像预期的那样成功。
我需要以下用例的帮助：-
1.我有3个选项（黄框）在这些红框或红框内的链接悬停应相应改变。
1.应该更容易显示为移动的设备，
解决方案>自动化（切换）>自动化链接列表
尝试复制在https://stripe.com/in x1c 0d1x上找到的功能
我复制了https://github.com/Sattu2806/GitHub-Clone的代码
在鼠标悬停和鼠标移出事件中，黄色突出显示的链接上的按钮不起作用。
1条答案
按热度按时间eh57zj3b1#
在Next.js中使用动态链接和突出显示的多级导航
在Next.js中构建像Stripe这样的导航栏需要兼顾状态管理、事件处理和条件渲染。以下是如何解决关键问题：
1.跟踪活动选项卡：
状态管理：考虑一个通用的“状态库”来存储当前选择的标签的ID或索引，而不是“Redux或反冲”。2.悬停和点击事件：
交互事件：将“onMouseEnter”和“onMouseLeave”替换为通用的“hover”和“leave”事件，或者考虑对移动的设备使用“click”。在交互时使用相应的选项ID/索引更新状态。3.突出显示链接：
条件渲染：仅当活动状态与当前选项匹配时才呈现“红框”及其链接。在JSX中使用“if”语句或类似的条件逻辑。4.移动友好性：
下拉开关：对于移动的，考虑一个“切换按钮”，显示所选选项的“红框”链接。这提高了点击的可访问性，减少了混乱。5.附加提示：
性能：通过记忆功能优化渲染，避免不必要的更新。可访问性：确保导航的键盘导航和屏幕阅读器兼容性。示例代码结构：
const options = [...]; //带有标签和链接的导航选项数组（可选）const [activeTab，setActiveTab] = useState（''）; //存储所选选项卡的状态
function setActiveTab（optionId）; }
function renderLinks（option）{ //仅为活动选项卡呈现链接的条件逻辑.}
返回（{options.map（option =>（<div className={
option-box ${activeTab === option.id ? 'active' : ''}} onClick={（）=> RenderInteraction（option.id）} > {option.label} {renderLinks（option）}））}）;