導航欄數據切換和數據目標不起作用

Question

我正在嘗試製作響應式導航欄。 在桌面上顯示NavBar中的NavItems，但在小設備中顯示三明治圖標，當我們點擊它時應顯示相同的NavItems。 但是，當我點擊按鈕時，沒有任何反應。 我做這個教程的適應： https://www.youtube.com/watch?v=oUKJA6B1Xr4

的看法是這樣的：

small devices version

desktop version

我NavBar.js

import React, {Component} from 'react'; 
import NavItems from "./NavItems"; 
class NavBar extends Component { 
render() { 
    return (
     <div> 
      <nav className="navbar navbar-default panel-app"> 
       <div className="navbar-header"> 
        <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" 
          data-target="#nav-collapse"> 
         <span className="icon-bar"></span> 
         <span className="icon-bar"></span> 
         <span className="icon-bar"></span> 
        </button> 

        <a className="navbar-brand" href="#">Hoje para jantar</a> 
       </div> 
       <div className="collapse navbar-collapse" id="nav-collapse"> 
        <NavItems className="nav navbar-nav" data-toggle="collapse" data-target=".in" href=""></NavItems> 
       </div> 
      </nav> 
     </div> 
    ); 
} 
} 
export default NavBar; 

我NavItems。 js

import React, {Component} from 'react'; 
class NavItems extends Component { 
    constructor(props) { 
     super(props); 
    } 
    render() { 
     return (
      <ul> 
       <li className="nav navbar-brand"><a href="#">Receitas</a></li> 
       <li className="nav navbar-brand"><a href="#">Por categoria</a></li> 
      </ul> 
     ); 
    } 
} 
export default NavItems; 

Answer 1

我忘了把jquery鏈接放在index.html文件中。現在它的作品:)