Question

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

这是基本程序：

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

Answer 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>

大型反应应用程序结构

1 个答案: