Javascript gatsbyjs中的bulma菜单切换不工作

GatsbyJS初学者在这里，试图获得Bulma响应菜单切换，以将is活动类应用到带有gatsby starter netlify cms的菜单gatsby v2。此处的所有代码：

当前显示切换按钮和脚本标记，但按钮没有响应

在中有一个工作版本-当我检查并比较我的站点时，我无法发现错误，只是在切换按钮上没有事件侦听器，而似乎应该有。 当我检查站点时，toggle.js脚本被调用，并放在结束body标记之前，然后被查看

我曾尝试过构建和部署，但没有成功，清除缓存并将脚本替换为bulma建议的代码

这是相关代码。 非常感谢您的帮助；我有点卡住了

在Layout.js中：

    import React from 'react' import Helmet from 'react-helmet'

import Navbar from '../components/Navbar' import Footer from '../components/Footer' import './all.sass'

const TemplateWrapper = ({ children }) => (   <div>
    <Helmet title="Immediate Start Jobs" />
    <Navbar />
    <div>{children}</div>
    <Footer />   </div> )

export default TemplateWrapper

---

我对盖茨比本人来说是个新手，但我必须想办法让导航栏正常工作。我的解决方案很快也很糟糕，但它是有效的。如果你建立一个有很多改变状态的组件的网站，我建议你使用redux和一个中央商店。我的解决方案是让导航条处理自己的状态

import React, { Component } from 'react'
import Link from 'gatsby-link'

class Navbar extends Component {

    state = {
        //This sets the state of Bulma elements
        navbarIsActive: "navbar-item has-dropdown"
      }

      //This opens the navbar dropdown
      navbarOpenDropdown = () => {
        this.setState({
          navbarIsActive: "navbar-item has-dropdown is-active"
        })
      }

      //This closes the navbar dropdown
      navbarCloseDropdown = () => {
        this.setState({
          navbarIsActive: "navbar-item has-dropdown"
        })
      }

    render() {
        return(
            <div>
                <nav class="navbar is-transparent" role="navigation" aria-label="dropdown navigation">
                    <a class="navbar-item">
                        <h1>Title!</h1>
                    </a>

                    <div 
                        class={this.state.navbarIsActive}
                        onMouseEnter={this.navbarOpenDropdown}
                        onMouseLeave={this.navbarCloseDropdown}
                        >
                        <a class="navbar-link">
                            Docs
                        </a>

                        <div class="navbar-dropdown is-boxed">
                            <Link to="/">Home</Link>
                            <Link to="/about">About Us</Link>
                            <Link to="/blog">Blog</Link>
                            <hr class="navbar-divider"/>
                            <div class="navbar-item">
                                Version 0.7.2
                            </div>
                        </div>
                    </div>
                </nav>

                <section class="hero">
                    <div class="hero-body">
                        <p class="title">
                            Documentation
                        </p>
                        <p class="subtitle">
                            Everything you need to <strong>create a website</strong> with Bulma
                        </p>
                    </div>
                </section>
            </div>
        )
    }
}

export default Navbar;

---

我对盖茨比本人来说是个新手，但我必须想办法让导航栏正常工作。我的解决方案很快也很糟糕，但它是有效的。如果你建立一个有很多改变状态的组件的网站，我建议你使用redux和一个中央商店。我的解决方案是让导航条处理自己的状态

import React, { Component } from 'react'
import Link from 'gatsby-link'

class Navbar extends Component {

    state = {
        //This sets the state of Bulma elements
        navbarIsActive: "navbar-item has-dropdown"
      }

      //This opens the navbar dropdown
      navbarOpenDropdown = () => {
        this.setState({
          navbarIsActive: "navbar-item has-dropdown is-active"
        })
      }

      //This closes the navbar dropdown
      navbarCloseDropdown = () => {
        this.setState({
          navbarIsActive: "navbar-item has-dropdown"
        })
      }

    render() {
        return(
            <div>
                <nav class="navbar is-transparent" role="navigation" aria-label="dropdown navigation">
                    <a class="navbar-item">
                        <h1>Title!</h1>
                    </a>

                    <div 
                        class={this.state.navbarIsActive}
                        onMouseEnter={this.navbarOpenDropdown}
                        onMouseLeave={this.navbarCloseDropdown}
                        >
                        <a class="navbar-link">
                            Docs
                        </a>

                        <div class="navbar-dropdown is-boxed">
                            <Link to="/">Home</Link>
                            <Link to="/about">About Us</Link>
                            <Link to="/blog">Blog</Link>
                            <hr class="navbar-divider"/>
                            <div class="navbar-item">
                                Version 0.7.2
                            </div>
                        </div>
                    </div>
                </nav>

                <section class="hero">
                    <div class="hero-body">
                        <p class="title">
                            Documentation
                        </p>
                        <p class="subtitle">
                            Everything you need to <strong>create a website</strong> with Bulma
                        </p>
                    </div>
                </section>
            </div>
        )
    }
}

export default Navbar;

---

那只是我两便士的价值：

src/Navbar.js

import React from 'react';
import PropTypes from 'prop-types';

const NavbarItem = props => (
  <a className="navbar-item is-capitalized" href={`#${props.page}`}>
    {props.page}
  </a>
);
const NavbarBurger = props => (
  <button
    onClick={props.toggleMenu}
    className={`button navbar-burger ${props.active ? 'is-active' : ''}`}
  >
    <span />
    <span />
    <span />
  </button>
);

export default class Navbar extends React.Component {
  state = {
    activeMenu: false,
  };
  toggleMenu = () => {
    this.setState({
      activeMenu: !this.state.activeMenu,
    });
  };
  render() {
    let { pages = [], color } = this.props;
    let navbarItems = pages.map(page => <NavbarItem page={page} key={page} />);
    return (
      <nav className={`navbar is-fixed-top is-${color}`}>
        <div className="navbar-brand">
          <NavbarItem page="logo" />
          <NavbarBurger
            active={this.state.activeMenu}
            toggleMenu={this.toggleMenu}
          />
        </div>
        <div
          className={`navbar-menu ${this.state.activeMenu ? 'is-active' : ''}`}
        >
          <div className="navbar-start">{navbarItems}</div>
        </div>
      </nav>
    );
  }
}

Navbar.propTypes = {
  pages: PropTypes.array.isRequired,
  color: PropTypes.string,
};

src/index.js

import React from 'react';
import { render } from 'react-dom';

import Navbar from './Navbar';

import 'bulma/css/bulma.css';

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

const pages = ['about', 'contact', 'sitemap'];
const App = () => (
  <div style={styles}>
    <Navbar pages={pages} />
  </div>
);

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

---

那只是我两便士的价值：

src/Navbar.js

import React from 'react';
import PropTypes from 'prop-types';

const NavbarItem = props => (
  <a className="navbar-item is-capitalized" href={`#${props.page}`}>
    {props.page}
  </a>
);
const NavbarBurger = props => (
  <button
    onClick={props.toggleMenu}
    className={`button navbar-burger ${props.active ? 'is-active' : ''}`}
  >
    <span />
    <span />
    <span />
  </button>
);

export default class Navbar extends React.Component {
  state = {
    activeMenu: false,
  };
  toggleMenu = () => {
    this.setState({
      activeMenu: !this.state.activeMenu,
    });
  };
  render() {
    let { pages = [], color } = this.props;
    let navbarItems = pages.map(page => <NavbarItem page={page} key={page} />);
    return (
      <nav className={`navbar is-fixed-top is-${color}`}>
        <div className="navbar-brand">
          <NavbarItem page="logo" />
          <NavbarBurger
            active={this.state.activeMenu}
            toggleMenu={this.toggleMenu}
          />
        </div>
        <div
          className={`navbar-menu ${this.state.activeMenu ? 'is-active' : ''}`}
        >
          <div className="navbar-start">{navbarItems}</div>
        </div>
      </nav>
    );
  }
}

Navbar.propTypes = {
  pages: PropTypes.array.isRequired,
  color: PropTypes.string,
};

src/index.js

import React from 'react';
import { render } from 'react-dom';

import Navbar from './Navbar';

import 'bulma/css/bulma.css';

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

const pages = ['about', 'contact', 'sitemap'];
const App = () => (
  <div style={styles}>
    <Navbar pages={pages} />
  </div>
);

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