在ReactJS中无法工作的引导带的选项卡更改功能

Question

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文件，其中添加了不同平板电脑的参考资料。

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等选项卡时，我看不到相应的内容。相反，仪表板、邮件、PromotionalActiv等中的所有内容都堆放在另一个下面。我希望根据选项卡是否已被单击而有条件地呈现该内容。

我在布置部件的方式上出错了吗？

Answer 1

好的，所以问题是我在每个子组件中添加了一个额外的div，比如Mail、PromotionalActive等等，因为这些组件影响了CSS类。在移除这些组件中的额外div后，问题得到了解决。

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

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}}

.

Answer 2

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

在Dashboard.js文件中，在tab-pane类中放置display: none;

在active类中，在tab-pane旁边放置display: block;