将 ant design 选项卡标题设置为看起来像单选按钮

Question

我正在尝试修改 antd 选项卡标题，使其看起来像单选按钮。尽管https://ant.design/components/tabs/ 的选项卡文档说我们可以将选项卡标题转换为单选按钮，但没有给出实现。我已将我正在尝试修改的选项卡的 antd 代码粘贴在下面，以便选项卡标题看起来像单选按钮。

 import { Tabs } from 'antd';

const { TabPane } = Tabs;

function callback(key) {
  console.log(key);
}

const Demo = () => (
  <Tabs defaultActiveKey="1" onChange={callback}>
    <TabPane tab="Tab 1" key="1">
      Content of Tab Pane 1
    </TabPane>
    <TabPane tab="Tab 2" key="2">
      Content of Tab Pane 2
    </TabPane>
    <TabPane tab="Tab 3" key="3">
      Content of Tab Pane 3
    </TabPane>
  </Tabs>
);

ReactDOM.render(<Demo />, mountNode);

Answer 1

我不太清楚你为什么不直接使用Radio Buttons。该文档声明您应该为辅助选项卡使用单选按钮。

您可以使用绑定到当前单选组值的状态变量来切换您的内容。

编辑：

function renderContent(tab: number) {
  switch(tab) {
    case 1:
     return <div>Content 1</div>;
    case 2:
     return <div>Content 2</div>;
    case 3:
     return <div>Content 3</div>;
  }
}

const App = () => {
  const [value, setValue] = React.useState(1);

  const onChange = e => {
    setValue(e.target.value);
  };

  return (
    <div>
      <Radio.Group onChange={onChange} value={value}>
        <Radio value={1}>Tab 1</Radio>
        <Radio value={2}>Tab 2</Radio>
        <Radio value={3}>Tab 3</Radio>
      </Radio.Group>
      <div>
        {renderContent(value)}
      </div>
    <div>
  );
};

ReactDOM.render(<App />, mountNode);