我是新来的 react 。为了使页面具有响应性,我为标题添加了导航切换。但它没有显示任何东西。在那里检查它但不可见。点击它时页面正在刷新。代码如下。
代码:-
<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>
提前致谢
最佳答案
确保您已正确安装和设置所有必需的依赖项。 (见 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 文档的组件部分中的一些示例(包括折叠按钮的图标)。
关于reactjs - 导航切换没有显示其隐形的 reactjs,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52360762/