React自定义构建的导航栏
React自定义构建的导航栏
提问于 2018-06-05 02:58:38
我有一个自定义导航菜单，我想使用的反应，我正在创建的网站，我想导航链接移动时，导航菜单被点击。
有几个部分我会自动假设是不正确的，比如我在哪里传递道具。
附注:我在这个项目中使用了样式组件，所以任何名称中带有样式的东西都与样式组件相关，而且我希望使用navItem来分离组件的主要原因是这样我就可以用CSS以不同的方式操作它们。
我认为最好从Navlink开始链接我正在处理的所有文件：
import React, { Component } from "react";
import NavItemStyle from "./NavItemStyle";
class NavItem extends Component {
render() {
return (
<NavItemStyle>
<ul onClick={this.props.click}>
<li value={this.props.nav}>
</li>
<li value={this.props.children}>
</li>
</ul>
</NavItemStyle>
);
}
}
export default NavItem;这是NavItems部分，我假设这是完全错误的。
import React, { Component } from "react";
import NavItem from './NavItem/NavItem';
class NavItems extends Component {
render() {
return this.props.navlists.map((navItem) => {
return <NavItem
click={() => this.props.clicked}
/>
});
}
}
export default NavItems;这是将在App中链接的主导航组件。
import React, {Component} from "react";
import NavMenu from "./NavMenu/NavMenu";
import NavItem from './NavLists/NavItem/NavItem';
import NavStyle from './NavStyle';
class Navigation extends Component {
constructor(props) {
super(props);
this.state = {
showMenu: false
}
}
handleClick() {
this.setState({showMenu: !this.state.showMenu})
}
render() {
return (
<NavStyle>
<NavMenu/>
{/*Nav items Display Home and Things to do.*/}
<NavItem />
<NavItem />
</NavStyle>
);
}
}
export default Navigation;另外，为了省去粘贴代码行的麻烦，我把汉堡(NavMenu)放在这里的一个粘贴箱里：- https://pastebin.com/T671GBjF
我希望最终的结果是，当按下汉堡时，页面的链接就会显示出来。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50687112
复制相关文章
相似问题
腾讯云开发者
