反应:菜单+子菜单+内容
[英] react: menu + submenu + content
本文介绍了反应:菜单+子菜单+内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在学习 React JavaScript 库.我想创建一个具有以下布局的简单网络应用程序:菜单 + 子菜单 + 内容.我使用 react 15.0.2、react-router 2.4.0、babel 6.5.2 和 webpack 1.13.0.
我能够创建菜单 + 内容布局，但我不知道添加子菜单部分的最佳做法是什么.
我的应用程序如下所示:
首页～关于～联系～简介内容...
我想在 Profile 菜单项下添加一个子菜单，但前 3 个菜单项没有子菜单.因此，如果我单击关于"和联系"链接，那么我希望在主菜单栏下看到正确的内容.如果我单击个人资料"链接，则需要显示一个子菜单.点击菜单+子菜单对下需要显示内容的子菜单项:
首页～关于～联系～简介配置文件-子菜单 1 ~ 配置文件-子菜单 2 ~ ...内容...
App.js
ReactDom.render(<路由器><路由组件={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}/></路线></路由器>,document.getElementById('root'));
MainLajout.js
导出默认类 MainLayout extends React.Component {使成为() {返回 (<div><主菜单/><main>{this.props.children}</main>
);}}
MainMenu.js
导出默认类 MainMenu extends React.Component {使成为() {返回 (<div style={style.container}><链接到='/'>主页</链接>{'\u00a0'}~{'\u00a0'}<Link to='/about'>关于</Link>{'\u00a0'}~{'\u00a0'}<Link to='/contact'>联系方式</Link>{'\u00a0'}~{'\u00a0'}<Link to='/profile'>Profile</Link>
);}}
你能指导我走向正确的方向吗?
解决方案
你或许可以将当前路径作为 prop 传递给 MainMenu
导出默认类 MainLayout extends React.Component {使成为() {返回 (<div><MainMenu path={this.props.location.pathname}/><main>{this.props.children}</main>
);}}
然后在您的主菜单中
导出默认类 MainMenu extends React.Component {使成为() {让子菜单=空；如果 (/^\/profile/.test(this.props.path)) {submenu = <Link to='/profile/submenu-1'>子菜单 1</Link><Link to='/profile/submenu-2'>子菜单 2</Link>
}返回 (<div><div style={style.container}><链接到='/'>主页</链接>{'\u00a0'}~{'\u00a0'}<Link to='/about'>关于</Link>{'\u00a0'}~{'\u00a0'}<Link to='/contact'>联系方式</Link>{'\u00a0'}~{'\u00a0'}<Link to='/profile'>Profile</Link>
{子菜单}
);}}
I am learning React JavaScript library.
I want to create a simple web-app with the following layout: menu + submenu + content. I use react 15.0.2, react-router 2.4.0, babel 6.5.2 and webpack 1.13.0.
I am able to create menu + content layout but I do not know what is the best practice to add a sub-menu section.
My app looks like this:
Home ~ About ~ Contact ~ Profile
content...
I want to add a sub-menu under the Profile menu item, but the first 3 menu items do not have sub-menu. So if I click on the About and Contact link then I want to see the proper content under the main menu bar. If I click on the Profile link then a submenu needs to be shown. Click on the submenu items the content needs to be displayed under the menu+submenu pairs:
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>
);
}
}
Could you please guide me to the right direction?
解决方案
You could probably pass the current path as a prop to MainMenu
export default class MainLayout extends React.Component {
render() {
return (
<div>
<MainMenu path={this.props.location.pathname} />
<main>{this.props.children}</main>
</div>
);
}
}
Then in your main menu
export default class MainMenu extends React.Component {
render() {
let submenu = null;
if (/^\/profile/.test(this.props.path)) {
submenu = <div style={style.submenu}>
<Link to='/profile/submenu-1'>Submenu 1</Link>
<Link to='/profile/submenu-2'>Submenu 2</Link>
</div>
}
return (<div>
<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>
{submenu}
</div>);
}
}
这篇关于反应:菜单+子菜单+内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
