最近，我根据React和ANTD写下了末端管理系统。它用于我的博客管理。当我参考其他开源项目时，我非常感兴趣。它是在管理背景中的背景中添加一个选项卡函数。=
当我第一次看到这个问题时，我的第一个反应是是否有一个API可以记录并获取路由堆栈中的所有路由，然后将其渲染以解决标签页面的显示问题，但我发现它是一个bitthere是没有这样的API，因此本文将使用上下文 +使用效果来监视路由以获得选项卡页面的显示。
外层包裹在上下文中，以使用上下文内部路由的使用效果监视。如果发生更改，请在“选项卡”列表中添加更改的路由属性，因为有必要实现标签名称的查询参数，TAB跳转并保存路由，应将SOTHIS信息保留在一起。
实际上，此功能也可以在没有上下文的情况下实现。只有在选项卡组件内使用使用效果才能达到相同的功能，但是考虑到将来，它可以在后台的背景中使用。
有想法后，很容易意识到它。首先，您必须编写上下文。这很容易在此处跳过，然后实现路由监视记录功能。这是使用效果。特定的代码逻辑可以看到函数的功能。
以上逻辑是核心部分。通过路由的更改，我们获得了一个选项卡列表。将来，我们只需要渲染显示的选项卡问题。
解决了添加的选项卡问题，下一步要解决的问题是选项卡的开关和关闭。您不仅关闭它。切换和关闭的代码逻辑非常简单。
对于选项卡的开关，我们需要一个新状态来保存当前选择的选项卡。这称为Activetab
为了关闭标签，无话可说。找到并删除它非常简单。这是一个特殊的处理，即确定当前是否选择了“封闭”选项卡。选定的选项卡向前移动以确保页面上不会有标签，但是页面仍位于该页面停留在适当的位置
在这一点上，已经实现了整个选项卡函数的基本逻辑。完整的代码可以在这里看到。实际上，完整的选项卡功能尚未结束。例如，选项卡的长度也有一个限制。应该有一个正确的单击菜单，其中包含一个完整的选项卡，可以实现更多功能，例如关闭其他功能并关闭所有功能。您不会在这里谈论它。如果你有时间
您也可以去我的博客查看?
原始：https：//juejin.cn/post/709489770721266183