我正在学习React JavaScript库。
我想创建一个简单的Web应用程序,它具有以下布局:菜单+子菜单+内容。 我使用React 15.0.2,react-router 2.4.0,babel 6.5.2和webpack 1.13.0。
我能够创建菜单+内容布局,但我不知道添加子菜单部分的最佳实践。
我的应用程序如下所示:
我想在个人资料菜单项下添加一个子菜单,但前三个菜单项没有子菜单。因此,如果我点击关于和联系链接,则希望在主菜单栏下看到正确的内容。如果我点击个人资料链接,则需要显示一个子菜单。点击子菜单项后,内容需要显示在菜单+子菜单对下面:
请问您能指导我正确的方向吗?
Home ~ About ~ Contact ~ Profile
content...
我想在个人资料菜单项下添加一个子菜单,但前三个菜单项没有子菜单。因此,如果我点击关于和联系链接,则希望在主菜单栏下看到正确的内容。如果我点击个人资料链接,则需要显示一个子菜单。点击子菜单项后,内容需要显示在菜单+子菜单对下面:
Home ~ About ~ Contact ~ Profile
Profile-Submenu 1 ~ Profile-Submenu 2 ~ ...
content...
App.js
ReactDom.render(
<Router>
<Route component={MainLayout}>
<Route path="/" component={Home} />
<Route path="home" component={Home} />
<Route path="about" component={About} />
<Route path="contact" component={Contact} />
<Route path="profile" component={Profile} />
</Route>
</Router>,
document.getElementById('root')
);
MainLajout.js
export default class MainLayout extends React.Component {
render() {
return (
<div>
<MainMenu />
<main>{this.props.children}</main>
</div>
);
}
}
MainMenu.js
export default class MainMenu extends React.Component {
render() {
return (
<div style={style.container}>
<Link to='/'>Home</Link>
{'\u00a0'}~{'\u00a0'}
<Link to='/about'>About</Link>
{'\u00a0'}~{'\u00a0'}
<Link to='/contact'>Contact</Link>
{'\u00a0'}~{'\u00a0'}
<Link to='/profile'>Profile</Link>
</div>
);
}
}
请问您能指导我正确的方向吗?