Bootstrap 的选项卡更改功能在 ReactJS 中不起作用答案

【问题标题】：Tab Change Functionality of Bootstrap not working in ReactJSBootstrap 的选项卡更改功能在 ReactJS 中不起作用
【发布时间】：2021-02-09 07:07:38
【问题描述】：

Layout.js 文件

<div class="row">
    <div class="col-12" style={{padding: 0}}>
    <div class="tabs-container-fluid">
        <MidTabs />
        <div class="tab-content">
            <Mail />
            <PromotionalActiv/>
            <Dashboard />
            <SalesOver />
            <XYZAnalysis />
        </div>
    </div>
</div>    
</div>

MidTabs.js 文件，其中为不同的平板电脑添加了 href。

return (
        <div>
            <ul class="nav nav-tabs" role="tablist">
                <li><a class="nav-link active" data-toggle="tab" href="#tablet-1"> <i class="fa fa-th-large"></i>Dashboard</a></li>
                <li><a class="nav-link " data-toggle="tab" href="#tablet-2" > <i class="fa fa-envelope"></i>Engage with ABC</a></li>
                <li><a class="nav-link " data-toggle="tab" href="#tablet-3"> <i class="fa fa-bar-chart-o"></i>Sales Overview</a></li>
                <li><a class="nav-link " data-toggle="tab" href="#tablet-4"> <i class="fa fa-handshake-o"></i>Promotional Activity</a></li>
                <li><a class="nav-link " data-toggle="tab" href="#tablet-5"> <i class="fa fa-user-circle"></i>XYZ Analysis</a></li>
            </ul>
        </div>
    );

Dashboard.js 文件

return (
        <div>
            <div role="tabpanel" id="tablet-1" class="tab-pane active">
                        <div class="panel-body" style={{backgroundColor : "rgb(243,243,244)", border : "none", margin : 0}}>
                            <div class="row" style={{marginBottom :30, zoom:"75%" }}>
                                <div class="timeline col-12" style={{fontSize : 12}}
............

我有 Mail.js、PromotionalActiv.js 等的类似文件。问题是当我点击 Dashbaord/Mail 等标签时，我看不到相应的内容。相反，Dashboard、Mail、PromotionalActiv 等中的所有内容都堆叠在一起。我希望根据是否已单击选项卡有条件地呈现该内容。

我在排列组件的方式上是否犯了错误？

【问题讨论】：

标签： javascript html css reactjs react-bootstrap

【解决方案1】：

如果您尝试使用一些自定义 css 进行控制，您可以这样做。

在 Dashboard.js 文件的 tab-pane 类中，输入 display: none;

在tab-pane 旁边的active 类中，输入display: block;

【讨论】：

【解决方案2】：

好的，所以问题是我在每个子组件（如 Mail、PromotionalActive 等）中添加了一个额外的 div，因此 CSS 类受到了影响。去掉这些组件中多余的 div 后，问题就解决了。

例如，Dashboard.js 文件现在看起来像这样，没有额外的 div：

return (
        <div role="tabpanel" id="tablet-1" class="tab-pane active">
                    <div class="panel-body" style={{backgroundColor : "rgb(243,243,244)", border : "none", margin : 0}}>
                        <div class="row" style={{marginBottom :30, zoom:"75%" }}>
                            <div class="timeline col-12" style={{fontSize : 12}}

............

【讨论】：