antd的tabs将tab的display改成visibility

Ant Design (antd) 提供了一个名为 `Tabs` 的组件，用于创建选项卡导航。如果你想控制某个 tab 的显示状态，而不是直接隐藏它（通常我们使用的是一种叫做 "display" 的 CSS 属性来切换元素的可见性），你可以通过调整 `TabPane` 中的 `visible` 或者 `activeKey` 属性来实现。

`visible` 属性是一个布尔值，当设置为 `false` 时，对应的 Tab 将不会渲染并显示；而 `activeKey` 则表示当前激活的 Tab 的 key，如果你只希望在特定条件下显示某一个 tab，可以在条件满足时改变它的 `activeKey` 使其变为当前激活的状态，此时其对应的 `visible` 就会自动变成 `true`。

例如：

import { Tabs, TabPane } from 'antd';

function MyComponent() {
  const [isTabVisible, setIsTabVisible] = React.useState(false);

  return (
    <Tabs>
      <TabPane key="1" tab="Tab 1" visible={isTabVisible}>
        Content for Tab 1
      </TabPane>
      <TabPane key="2" tab="Tab 2">
        Content for Tab 2
      </TabPane>

      {/* 使用函数式更新机制来控制 Tab 的显示 */}
      <button onClick={() => setIsTabVisible(!isTabVisible)}>
        Toggle visibility of Tab 1
      </button>
    </Tabs>
  );
}

在这个例子中，点击按钮时 `isTabVisible` 状态会被翻转，从而切换第一个 Tab 的显示状态。