Question

我使用Meteor，React和Material-UI来创建应用。为了简单起见，我们假设该应用有两个页面：家庭和用户。

两个页面应该具有相同的布局：左边是汉堡菜单的AppBar，右边是IconMenu。选择汉堡菜单后，抽屉将从左侧滑出，当选择右侧菜单时，将出现一个下拉菜单。

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

我的问题是：在构建此选项方面我有哪些选择？

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

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

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

Answer 1

我为此目的使用了反应路由器。

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

在模板应用程序中，我们可以使用this.props.main和this.props.sidebar作为变量。

请查看https://github.com/reactjs/react-router/blob/master/examples/sidebar/app.js表格详情。

React和Material-UI：如何使用多个页面构建应用程序

1 个答案: