提问人：Mohammed Yousuff 提问时间：11/6/2022 更新时间：11/6/2022 访问量：582
单击按钮 react-tabs 时在选项卡之间导航
Navigate between tabs on click of button react-tabs
问：
大家好，我是 react 和 javascript 的新手。
单击按钮时，要移动到下一个选项卡，最后一个选项卡应提交。使用的依赖项是“https://www.npmjs.com/package/react-tabs”。
任何帮助将不胜感激。请查看下面的代码了解更多详情。
<Tabs>
<TabList>
<CustomTab>Custom Tab 1</CustomTab>
<CustomTab>Custom Tab 2</CustomTab>
</TabList>
<TabPanel>Panel 1</TabPanel>
<TabPanel>Panel 2</TabPanel>
</Tabs>
<button>prev tab</button>
<button>next tab</button>
提前感谢您的帮助。
答：
0赞
monim
11/6/2022
#1
要使用自定义选项卡，您必须将其 .react-tabstabsRole
CustomTab.tabsRole = 'Tab';
并应传递给所有其他道具：
const CustomTab = ({ children, ...otherProps }): ReactTabsFunctionComponent<TabProps> => (
<Tab {...otherProps}>
<h1>{children}</h1>
</Tab>
);
您案例中的示例示例：
import * as React from "react";
import { Tabs, TabList, Tab, TabPanel } from "react-tabs";
import type { ReactTabsFunctionComponent, TabProps } from "react-tabs";
const CustomTab = ({
children,
...otherProps
}): ReactTabsFunctionComponent<TabProps> => (
<Tab {...otherProps}>
<h1>{children}</h1>
</Tab>
);
CustomTab.tabsRole = "Tab";
function App() {
return (
<div>
<Tabs>
<TabList>
<CustomTab>Custom Tab 1</CustomTab>
<CustomTab>Custom Tab 2</CustomTab>
</TabList>
<TabPanel>Panel 1</TabPanel>
<TabPanel>Panel 2</TabPanel>
</Tabs>
<button>prev tab</button>
<button>next tab</button>
</div>
);
}
export default App;
查看文档了解更多详情
评论
0赞
Mohammed Yousuff
11/7/2022
感谢您抽出时间，确实需要传递一些功能才能在选项卡中来回切换，只是添加按钮标签不起作用
评论