Javascript 反应：菜单+；子菜单+；内容

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

我能够创建菜单+内容布局，但我不知道添加子菜单部分的最佳实践是什么

我的应用程序如下所示：

Home ~ About ~ Contact ~ Profile

content...

我想在Profile菜单项下添加一个子菜单，但前3个菜单项没有子菜单。因此，如果我点击About和Contact链接，那么我想在主菜单栏下看到正确的内容。如果我点击Profile链接，则需要显示一个子菜单。单击子菜单项，需要在菜单+子菜单对下显示内容：

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

ReactDom.render(
,  
document.getElementById（'root'））
);

MainLajout.js

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

导出默认类MainLayout.Component{
render（）{
返回(
{this.props.children}
);
}
}

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

export default class主菜单扩展React.Component{
render（）{
返回(
家
{'\u00a0'}{'\u00a0'}
关于
{'\u00a0'}{'\u00a0'}
接触
{'\u00a0'}{'\u00a0'}
轮廓
);
}
}

---

你能告诉我正确的方向吗？

你可以将当前路径作为道具传递到

主菜单

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

导出默认类MainLayout.Component{
render（）{
返回(
{this.props.children}
);
}
}

然后在你的主菜单上

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

export default class主菜单扩展React.Component{
render（）{
设子菜单=null；
if（/^\/profile/.test（this.props.path））{
子菜单=
子菜单1
子菜单2
}
返回(
家
{'\u00a0'}{'\u00a0'}
关于
{'\u00a0'}{'\u00a0'}
接触
{'\u00a0'}{'\u00a0'}
轮廓
{子菜单}
);
}
}

谢谢，它很有魅力。我只有一个小评论：{submenu}需要在div元素之间：main menu{submenu}。哦，是的，我发布的有点太快了。我会用它更新答案看看这个：可能有用