时间戳

首页 > 解决方案 > 如何有条件地显示/隐藏选项卡-React js

reactjs - 如何有条件地显示/隐藏选项卡-React js

问题描述

我需要以下代码的条件，当我们通过地址 id 时，它只会显示升级页面选项卡，并且会通过砖块，它只会显示新的购买页面选项卡。现在它显示了两个选项卡。我需要一个标签。请帮助解决这个问题。

标签： reactjs

解决方案

如果我正确理解您的问题，您可以使用 selectActive 选项卡隐藏/显示您选择的选项卡，如下所示：

<Row className="mt-3">
   <Col>
       <Tabs onSelect={selectTab} defaultActiveKey={selectActive()} id="uncontrolled-tab-example" style={{ backgroundColor: 'rgb(237 245 240 / 38%)' }}>
       {selectActive() === "newPurchase" && (
        <Tab eventKey="newPurchase" title="New Webshop">
           <NewPurchase/>
       </Tab>
       )}
       {selectActive() === "upgrade" && (
       <Tab eventKey="upgrade" title="Existing Webshop">
            <Upgrade/>
       </Tab>
       )}
     </Tabs>
   </Col>
 </Row>

它将根据函数返回的值显示/隐藏选项卡。顺便说一句，您的问题需要更清楚

推荐阅读