将 ant design 选项卡 header 样式设置为看起来像单选按钮

Question

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

 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);

将 ant design 选项卡 header 样式设置为看起来像单选按钮

styling ant design tab header to look like radio buttons

tabs

radio-button

reactjs

antd