Question

我在我的react应用程序的两个页面中一直使用react选项卡，其中第二个页面在第一页面内部调用。每当我在第二页中选择选项卡时，它就会显示第一页的选项卡。我们是否需要为此设置任何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;

反应选项卡-选项卡选择其他页面的调用选项卡

1 个答案: