Bootstrap 的选项卡更改功能在 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 文件，其中为不同的平板电脑添加了 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 等中的所有内容都堆叠在一起。我希望根据选项卡是否被点击来有条件地呈现该内容。

我是不是在安排组件的方式上犯了错误？

Answer 1

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

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

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

Answer 2

好的，所以问题是我在每个子组件（如 Mail、PromotionalActive 等）中添加了一个额外的 div，因此 CSS class 受到了影响。删除那些组件中多余的 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}}

.......

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

Tab Change Functionality of Bootstrap not working in ReactJS

html

javascript

css

reactjs

react-bootstrap