Ant Design tabs 角色控制答案

【问题标题】：Antdesign tabs role controlAnt Design tabs 角色控制
【发布时间】：2021-02-22 14:06:45
【问题描述】：

我想用基于角色的受控选项卡创建一个选项卡，另一方面，我看不到选项卡上的两个组件。

我添加了示例。谁能解决？

【问题讨论】：

【解决方案1】：

Antd 会扫描Tabs 的直接子节点来构建导航。实现这一点的更好方法是使用条件 JSX：

{isAdmin && (
  <TabPane tab="Tab 3" key="3">
    Content of Tab Pane 3
  </TabPane>
)}

如果你想将数据注入到你的表格中，你可以通过另一个组件传递道具，但不能隐藏导航链接，因为 Antd 会检测到它并将其添加到导航中：

<Role isAdmin tab="Tab 3" key="3">
  Content of Tab Pane 3
</Role>
// ...
function Role({ isAdmin, children, ...rest }) {
  // Work with isAdmin;
  return <TabPane {...rest}>{children}</TabPane>;
}

【讨论】：

谢谢，但我希望一些想法可以在全球范围内使用。一种角色管理中间件的高阶组件。有没有办法做到这一点？我也知道条件 JSX。我认为在这种情况下看起来很乱。