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

Question

我正在尝试制作一个响应式导航栏。 在桌面上显示导航栏中的导航项，但在小型设备中显示三明治图标，当我们单击它时应该显示相同的导航项。 但是，当我单击按钮时，什么也没有发生。 我正在对本教程进行改编: https://www.youtube.com/watch?v=oUKJA6B1Xr4

View 如下所示:

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 文件中。 现在可以了:)