时间戳

首页 > 解决方案 > 如何从 React 中的引导切换菜单制作移动按钮？

reactjs - 如何从 React 中的引导切换菜单制作移动按钮？

问题描述

我在 React 中使用 bootstrap 4.0。只是简单的引导：

import React from "react";
import ReactDOM from "react-dom";
import "bootstrap/dist/css/bootstrap.css";

我怎样才能使它与 React 一起正常工作。当我使用移动和中等屏幕尺寸时，它会出现但它不起作用。在这种情况下正确的方法是什么？手动创建本地状态？

在这里观看它是如何工作的：项目

标签： reactjs

解决方案

这是来自https://reactstrap.github.io/components/navbar/的示例

这是使用 reactstrap 但可以帮助您了解如何在反应中做到这一点

import React from 'react';
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';

export default class Example extends React.Component {
  constructor(props) {
   super(props);

   this.toggleNavbar = this.toggleNavbar.bind(this);
   this.state = {
    collapsed: true
   };
  }

 toggleNavbar() {
  this.setState({
   collapsed: !this.state.collapsed
  });
}


render() {
    return (
      <div>
        <Navbar color="faded" light>
          <NavbarBrand href="/" className="mr-auto">reactstrap</NavbarBrand>
          <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
          <Collapse isOpen={!this.state.collapsed} navbar>
            <Nav navbar>
              <NavItem>
                <NavLink href="/components/">Components</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}

推荐阅读