nav-toggle 没有显示其不可见的 reactjs答案

【问题标题】：nav-toggle not showing its invisible reactjsnav-toggle 没有显示其不可见的 reactjs
【发布时间】：2019-02-20 23:11:34
【问题描述】：

我是新来的反应。为了使页面响应，我为标题添加了导航切换。但它没有显示任何东西。在检查它但不可见时。单击它时页面正在刷新。代码如下。

代码：-

    <section id="home" role="banner">
    <header id="header">
        <div className="header-content clearfix">
            <a href=""><img src={logo} alt="" className="logo" /></a>
            <nav className="navigation">
                <ul className="primary-nav">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#card">Product</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#cata">Categories</a></li>
                    <li><a href="#test">Blogs</a></li>
                    <li><a href="#test2">News</a></li>
                    <li><a href="#busns" className="btn btnadd">Adds</a></li>
                    <li><a href="/login">LOGIN</a></li>
                </ul>
            </nav>
            <a href="" className="nav-toggle" data-target="#navigation">Menu<span></span></a>
        </div>
    </header>
</section>

提前致谢

【问题讨论】：

你能创造出这样的小提琴吗？
用类名替换类。您需要使用 className 代替 class 来响应 css 样式
好的，我试试
我已将类更改为 className 但仍然相同，页面没有其他内容刷新
你的 index.html 中添加了引导 css 吗？

标签： reactjs bootstrap-4 reactstrap

【解决方案1】：

确保您已正确安装和设置所有必需的依赖项。（见reacstrap documentation）。

有关完整的工作示例，请参阅 reactstrap-navbartoggler-example。

这是一个实现导航栏的示例组件：

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

const links = [
  { href: '#home', text: 'Home' },
  { href: '#card', text: 'Product' },
  { href: '#about', text: 'About' },
  { href: '#cata', text: 'Categories' },
  { href: '#test', text: 'Blogs' },
  { href: '#test2', text: 'News' },
  { href: '#busns', text: 'Adds', className: 'btnadd' },
  { href: '/login', text: 'LOGIN' },
];

const createNavItem = ({ href, text, className }) => (
  <NavItem>
    <NavLink href={href} className={className}>{text}</NavLink>
  </NavItem>
);

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

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  render() {
    return (
      <div>
        <Navbar color="light" light expand="md">
          <NavbarBrand href="/">reactstrap</NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              {links.map(createNavItem)}
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}

请注意：在 Reacstrap 文档中，Installation/CDN 下有一个演示链接。该演示非常旧（reacstrap v2 和 react v15）。演示中的依赖项不适用于 Reacstrap 文档的组件部分中的某些示例（包括折叠按钮的图标）。

【讨论】：