引導中的藥丸在反應項目中不起作用

Question

我正在嘗試在我的反應項目中創建一個藥丸導航欄，並且我的鏈接不工作，雖然它顯示id正在通過。任何人都可以告訴我我的錯誤在哪裏，或者爲什麼它不起作用？ 這裏是我的代碼：

 render(){ 
     return(
     <div className="searchContainer" dir="rtl"> 
<ul className="nav nav-pills"> 
    <li className="active"><a data-toggle="pill" href="#home">Home</a></li> 
    <li><a data-toggle="pill" href="#menu1">Menu 1</a></li> 
    <li><a data-toggle="pill" href="#menu2">Menu 2</a></li> 
</ul> 

<div className="tab-content"> 
    <div id="home" className="tab-pane fade in active"> 
    <h3>HOME</h3> 
    <p>Some content.</p> 
    </div> 
    <div id="menu1" className="tab-pane fade"> 
    <h3>Menu 1</h3> 
    <p>Some content in menu 1.</p> 
    </div> 
    <div id="menu2" className="tab-pane fade"> 
    <h3>Menu 2</h3> 
    <p>Some content in menu 2.</p> 
    </div> 
</div> 
      </div>   
     ); 
    } 

    } 

我已經包含在app.jsx這些腳本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"/> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

Answer 1

我已經創造了反應的功能組件，其中只包含您所提供的標記和一些圖書館

1. 陣營
2. 反應-DOM
3. 引導CSS
4. 引導JS
5. jQuery的

確保您使用的這些JS庫，並腳本順序很重要。檢入代碼片段。你也可以看到運行的代碼。

const Comp =() => (
 
<div> 
 
<h3> Test 1 </h3> 
 
<hr/> 
 
<ul className="nav nav-pills"> 
 
    <li className="active"><a data-toggle="pill" href="#home">Home</a></li> 
 
    <li><a data-toggle="pill" href="#menu1">Menu 1</a></li> 
 
    <li><a data-toggle="pill" href="#menu2">Menu 2</a></li> 
 
</ul> 
 

 
<div className="tab-content"> 
 
    <div id="home" className="tab-pane fade in active"> 
 
    <h3>HOME</h3> 
 
    <p>Some content.</p> 
 
    </div> 
 
    <div id="menu1" className="tab-pane fade"> 
 
    <h3>Menu 1</h3> 
 
    <p>Some content in menu 1.</p> 
 
    </div> 
 
    <div id="menu2" className="tab-pane fade"> 
 
    <h3>Menu 2</h3> 
 
    <p>Some content in menu 2.</p> 
 
    </div> 
 
</div> 
 
</div> 
 
); 
 

 
ReactDOM.render(<Comp /> , 
 
    document.getElementById('root') 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div id="root"></div>