React tabs - tab 选择其他页面的调用选项卡

Question

我一直在我的反应应用程序的两个页面中使用反应选项卡，其中第二个页面在第一页中被调用。每当我选择第二页中的选项卡时，它都会显示第一页的选项卡面板。我们是否需要为此设置任何 id 或 onclick 事件。

在 Test.js 页面中，使用带有以下代码的选项卡

    <Tabs>
    <TabList>
           <Tab> Page 1 </Tab>
           <Tab> Page 2 </Tab> 
     </TabList>

     <TabPanel> <Page1 /></TabPanel>               
    <TabPanel> <Page2 /></TabPanel>               

     </Tabs>

在Page2.js中，使用“react-web-tabs”实现垂直标签，代码如下，

<Tabs defaultTab="vertical-tab-one" vertical className="vertical-tabs">
  <TabList>
    <Tab tabFor="vertical-tab-one">Tab 1</Tab>
    <Tab tabFor="vertical-tab-two">Tab 2</Tab>

  </TabList>

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

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

</Tabs>

当我点击 Tab2 时，它会显示标签 2 的内容，但是如果我点击 Tab1，它会显示页面 1(Test.js)，而不是标签 1。

Answer 1

两个不同的库之间存在冲突。我只会选择其中之一。 （反应标签可以垂直）。以下是一些示例，展示了如何使用 react-tabs 进行垂直处理： （链接有两个例子，一个在下面，一个在旁边） https://codesandbox.io/s/dreamy-aryabhata-6gxc6?file=/src/index.js

import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import styled from "styled-components";
import React from "react";

    const StyledTab = styled.div`
      ul {
        display: flex;
        flex-direction: column;
        border: none;
      }
      .react-tabs__tab {
        border: none;
        :hover {
          background: blue;
        }
      }
    `;
    const Page2 = props => {
      return (
        <StyledTab>
          <Tabs>
            <TabList>
              <Tab>Title 1</Tab>
              <Tab>Title 2</Tab>
            </TabList>

            <TabPanel>
              <h2>Any content 1</h2>
            </TabPanel>
            <TabPanel>
              <h2>Any content 2</h2>
            </TabPanel>
          </Tabs>
        </StyledTab>
      );
    };
    export default Page2;