2

我正在使用 Meteor、React 和 Material-UI 来创建应用程序。为简单起见，假设应用程序有两个页面：主页和用户。

两个页面应该有相同的布局：左边是一个带有汉堡菜单的 AppBar，右边是一个 IconMenu。When the hamburger menu is selected a Drawer will slide out from the left, and when the right menu is selected a drop-down menu will appear.

出于我的目的，抽屉菜单是静态的，即菜单条目不会根据正在显示的页面（主页或用户）而改变。然而，右边的下拉菜单会根据活动页面的不同而改变，即它是上下文相关的。

我的问题是：在构建这个方面我有什么选择？

我认为一种选择是创建两个页面组件，例如 HomePage 和 UserPage，并使用例如 MyAppBar 和 MyDrawer 组合每个组件，以及特定页面应包含的任何内容。然后每个页面将负责在下拉菜单上创建菜单项并将它们传递给 MyAppBar，然后将呈现整个页面。

我相信这会解决问题，但我不确定是否有更好的方法。例如，是否有第二种方法可以只更新页面的内容组件并让拥有组件（例如 ApplicationPage 组件）查询内容组件（例如 HomeContent 或 UserContent）以获取下拉菜单的条目和当内容组件发生变化时设置下拉菜单？还有其他选择吗？

我正在使用 React Router 为 /home 和 /user 进行路由，所以上面的内容也必须适合。

4

1 回答 1

0

为此，我使用反应路由器。

  <Router history={browserHistory}>
     <Route component={App}>
         <Route path='/login/' components={{main: Login}} />
         <Route path='/confirm' 
                components={{
                                main: Confirm,
                                sidebar:Sidebar
                            }} 
          />
     </Route>
  </Router>

在 Template App 中，我们可以使用 this.props.main 和 this.props.sidebar 作为变量。

请查看https://github.com/reactjs/react-router/blob/master/examples/sidebar/app.js以获取更多详细信息。

于 2016-06-20T12:34:53.327 回答