如何使垂直标签产生反应

有人能为我提供一种使用react创建垂直标签的方法吗?

我尝试了各种NPM包,如React Web Tabs、ReactStrap和React-BootStrap。最后两个包只有水平选项卡的示例。React-Web-Tabs的文档中有垂直选项卡的示例,但不起作用。

import { Tabs, Tab, TabPanel, TabList } from 'react-web-tabs';

class NewNavigation extends React.Component{
render(){
return(
    <Tabs defaultTab="vertical-tab-one" vertical>
        <TabList>
            <Tab tabFor="vertical-tab-one">Tab 1</Tab>
            <Tab tabFor="vertical-tab-two">Tab 2</Tab>
            <Tab tabFor="vertical-tab-three">Tab 3</Tab>
        </TabList>

        <TabPanel tabId="vertical-tab-one">
            <p>Tab 1 content</p>
        </TabPanel>

        <TabPanel tabId="vertical-tab-two">
            <p>Tab content</p>
        </TabPanel>

        <TabPanel tabId="vertical-tab-three">
            <p>Tab 3 content</p>
        </TabPanel>
    </Tabs>
    );
}
}

到目前为止,它显示基本的水平标签,我想修复这个代码,因为它显示垂直标签。如果您推荐任何其他方式,也非常感谢。