Question

我正在使用 Ant Design Tab，但我的要求是当我们转到每个选项卡时我想更改链接。下面是我的代码。但是在这里，当我单击第二个选项卡时，它显示的是空白页。选项卡的内容未显示。任何人都可以给我建议解决方案吗？

代码：

const TabContainer =()=>{

 const handleTabClick =(key) => {
  history.push(`/${key}`)   
  
  }

  render = () => (
    <Tabs defaultActiveKey="history" onChange={handleTabClick}>
      <TabPane tab="Tab 1" key="history">History</TabPane>
      <TabPane tab="Tab 2" key="math">Math</TabPane>
      <TabPane tab="Tab 3" key="science">Science</TabPane>
    </Tabs>
  )

Answer 1

如果您想使用 url/history 控制活动标签，请使用 activeKey。 defaultActiveKey 只定义了一个起点

const TabContainer =()=> {
  const handleTabClick =(key) => {
    history.push(`/${key}`)   
  }

  render = () => (
    <Tabs activeKey={location.pathname.slice(1)} onChange={handleTabClick}>
      <TabPane tab="Tab 1" key="history">History</TabPane>
      <TabPane tab="Tab 2" key="math">Math</TabPane>
      <TabPane tab="Tab 3" key="science">Science</TabPane>
    </Tabs>
  )
}

使用反应蚂蚁设计更改时如何更改每个选项卡的链接？

1 个答案: