Я использую эту библиотеку для внешнего интерфейса, основанного на Bulma, и у меня возникли проблемы с иконкой гамбургера. Вот документация Пример, но опять же, понять это непросто . Я искал обходной путь и решение для этого, но не могу его найти, я делаю это в стиле ES6, и вот мой код.

import React, { Component } from "react";
import { Navbar } from "react-bulma-components/full";
class MenuNavbar extends Component {
  render() {
    return (
      <div id="header">
        <Navbar color="info" fixed="top">
          <Navbar.Brand>
            <Navbar.Item renderAs="a" href="/">
              <img src="https://i.imgur.com/9jQaBuq.png" alt="Dew Ventures" />
            </Navbar.Item>
            <Navbar.Burger />
          </Navbar.Brand>
          <Navbar.Menu>
            <Navbar.Container>
              <Navbar.Item href="/">Home</Navbar.Item>
              <Navbar.Item href="/about"> About Us</Navbar.Item>
              <Navbar.Item href="/contact"> Contact Us</Navbar.Item>
            </Navbar.Container>
          </Navbar.Menu>
        </Navbar>
      </div>
    );
  }
}

export default MenuNavbar;
0
user10415043 25 Сен 2018 в 21:58

3 ответа

Лучший ответ
<Navbar.Burger
     active={open}
     onClick={() =>
       this.setState(state => {
         open: !state.open;
       })
     }
 />

Из книги рассказов, на которую вы ссылались, в примере показано, что существует обработчик onClick, который устанавливает состояние для преобразования гамбургера в крест. Вам нужен какой-то обработчик, который устанавливает active реквизит true. Это изменит гамбургер на крестик при каждом нажатии на компонент.

И из исходного кода та библиотека для компонента бургера внутри Navbar, который вы используете, компонент требует, чтобы вы передали активную пропозицию как true, чтобы установить класс is-active css, который Булма использует изначально изменить гамбургер на крестик:

import React, { Component } from "react";
import { Navbar } from "react-bulma-components/full";
class MenuNavbar extends Component {
  // set active state for hamburger
  state = { active : false }

  handleClick = () => { 
     const { active } = this.state;
     this.setState({ active: !active }); 
  }
  render() {
    return (
      <div id="header">
    <Navbar color="info" fixed="top" active={this.state.active}>
          <Navbar.Brand>
            <Navbar.Item renderAs="a" href="/">
              <img src="https://i.imgur.com/9jQaBuq.png" alt="Dew Ventures" />
            </Navbar.Item>
            <Navbar.Burger
              active={this.state.active}
              onClick={this.handleClick}
    />
          </Navbar.Brand>
          <Navbar.Menu>
            <Navbar.Container>
              <Navbar.Item href="/">Home</Navbar.Item>
              <Navbar.Item href="/about"> About Us</Navbar.Item>
              <Navbar.Item href="/contact"> Contact Us</Navbar.Item>
            </Navbar.Container>
          </Navbar.Menu>
        </Navbar>
      </div>
    );
  }
}

export default MenuNavbar;
3
tlm 25 Сен 2018 в 20:41

Вы можете переключать навигационную панель в чистом Bulma CSS с использованием ссылки:

burger = React.createRef();
menu = React.createRef();

toggle = () => {

  if (this.menu.current.classList.contains("is-active")) {
    this.menu.current.classList.remove("is-active");
  } else {
    this.menu.current.classList.add("is-active");
  }

};

Этот подход принят и для вашего случая

1
xargr 22 Ноя 2018 в 11:19

Plug and Play Реагируйте используя usE UseEffect ... Не забудьте добавить классы nav-toggle и navbar-menu к вашему бургеру и nav соответственно

  useEffect(() => {
(function() {
  var burger = document.querySelector('.nav-toggle');
  var menu = document.querySelector('.navbar-menu');
  burger.addEventListener('click', function() {
      burger.classList.toggle('is-active');
      menu.classList.toggle('is-active');
  });
 })();
}, [])



        <nav className="navbar">
          <div className="navbar-brand is-1">
            <a href="/" className="navbar-item">
              <img src={logo} alt="YMCA"/>
            </a>
            <button className="navbar-burger burger is-white button nav-toggle"
            aria-label="menu" aria-expanded="false" data-target="Options">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </button>
          </div>
          <div  className="navbar-menu is-8 is-offset-a" id="Options">
            <div className="navbar-end mt-2">
              <button type="submit">Association Level Prediction</button>
              <button type="submit" >Custom Prediction</button>
              <button type="submit" onClick={() => handleNavigate(ROUTE_ABOUT)} className={checkIfActive(ROUTE_ABOUT)}>About</button>
              <button type="submit" onClick={() => handleLogout()} className={checkIfActive('logout')}>Logout</button>
            </div>
          </div>
      </nav>
0
DisplayName 21 Окт 2019 в 21:54