javascript - 导航栏数据切换和数据目标不起作用

我正在尝试制作一个响应式导航栏。
在桌面中，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;

最佳答案

我忘记将jquery链接放在index.html文件中。
现在可以了:)