gpt4 book ai didi

javascript - react : menu + submenu + content

转载 作者:行者123 更新时间:2023-11-30 11:58:59 25 4
gpt4 key购买 nike

我正在学习 React JavaScript 库。我想创建一个具有以下布局的简单网络应用程序:菜单 + 子菜单 + 内容。我使用 react 15.0.2、react-router 2.4.0、babel 6.5.2 和 webpack 1.13.0。

我可以创建菜单 + 内容布局,但我不知道添加子菜单部分的最佳做法是什么。

我的应用看起来像这样:

Home ~ About ~ Contact ~ Profile

content...

我想在Profile菜单项下添加一个子菜单,但是前3个菜单项没有子菜单。因此,如果我单击关于和联系链接,那么我想在主菜单栏下看到正确的内容。如果我单击配置文件链接,则需要显示一个子菜单。点击菜单+子菜单对下需要显示内容的子菜单项:

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>
);
}
}

主菜单.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>
);
}
}

你能指引我正确的方向吗?

最佳答案

您可能会将当前路径作为 Prop 传递给 MainMenu

export default class MainLayout extends React.Component {
render() {
return (
<div>
<MainMenu path={this.props.location.pathname} />
<main>{this.props.children}</main>
</div>
);
}
}

然后在你的主菜单中

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>);
}
}

关于javascript - react : menu + submenu + content,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37149962/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com