大型反应应用程序结构

时间:2016-09-23 20:34:32

标签: meteor react-router meteor-react

我正在构建一个大型应用程序,并且遇到了路由问题。我很想知道如何通过这种路由/道具/参数冲突。

这是基本程序:

Login ->
  Choose classroom (get classroom._id) ->
    Load BaseLayout (this retrieves the classroom from the DB) ->
      Load RosterLayout (or any other subdivision of the application (schedule, photos, etc.)

由于教室的每个页面(日程表,名册等)都是自己的迷你应用程序,我想我会使用react-router加载这些布局组件。但是,我无法弄清楚如何构造它,以便我可以使用在子组件内classroom组件内部加载的BaseLayout。在这个例子中,我尝试通过URL传递_id但是我仍然需要再次检索教室 这看起来不是很好的架构,我不会{{ 1}}可以知道什么时候准备好了。除了URL参数之外,还有更好或不同的方法来处理这种情况吗?我可以将props传递给通过react-router加载的子组件吗?

以下是基本代码:

classroom_loading

1 个答案:

答案 0 :(得分:1)

我感谢@slightlytyler在不和谐的#reactiflux服务器中找到了一个很好的解决方案。谢谢泰勒!

而不是盲目地将孩子加载到BaseLayout,如下所示:

<div id="bodyContainer">
    {this.props.children}
</div>

...你可以克隆传入的孩子并将自己的道具附加到它上面,这在这种情况下非常有效。

<div id="bodyContainer">
    {React.Children.map(this.props.children, (
        return React.cloneElement(child, {
            classroom_loading: this.props.classroom_loading,
            classroom: this.props.classroom
        });
    })}
</div>