渲染嵌套路线组件ReactJS

我有嵌套的路线，深入3层，但我无法呈现我最后一个路线的组件。这就是我如何构造我的路线：渲染嵌套路线组件ReactJS

<Provider store={store}> 
<Router history={browserHistory}> 
    <Route path="/login" component={Login} /> 
    <Route path="/" name="test" component={requireAuthentication(App)}> 
    <Route path="/modules" name="Modules" component={Modules}> 
     <Route path="virtual-inputs" name="Virtual Inputs" component={VirtualInput}> 
     <Route path="add" name="Add new virtual input" component={AddVirtualInput}/> 
     </Route> 
    </Route> 
    </Route> 
</Router> 
</Provider>

当我去的模块/虚拟输入/加我得到我的组件VirtualInput呈现。

我使用this.props.children在模块内部渲染了我的子组件，但在进入/ modules/virtual-inputs/add时如何渲染我的组件AddVirtualInput？

我看到了已经在另一个线程（https://stackoverflow.com/a/33690586/846326）另一个解决办法是让我的路线是这样的：

<Route path="/modules" name="Modules" component={Modules}> 
    <Route path="virtual-inputs" name="Virtual Inputs" component={VirtualInput}/> 
    <Route path="virtual-inputs/add" name="Add new virtual input" component={AddVirtualInput}/> 
</Route>

这是为了做到这一点，这意味着我们不能去再然后2级？

来源

2016-02-25 SteenhouwerD

React路由器中的路由嵌套层次没有限制。

嵌套路由时，父路由组件将收到当前匹配的子路由组件，如this.props.children。只要你不忘记使用this.props.children，他们应该渲染得很好。

在你的情况下，它应该足以确保在组件的render()方法中使用this.props.children。否则，它将在this.props.children中收到AddVirtualInput，但您不会看到它，因为它不会呈现。

如果您已经这样做了，请分享组件的完整代码以进一步诊断问题。

来源

2016-02-26 00:39:46

我正在做{React.cloneElement（this.props.children，{... this.props}）}在我的父组件模块和VirtualInput中，但是当去到我的一个子组件导致Uncaught RangeError：最大调用堆栈大小超出。我有另一个例子，我有完全相同的问题。请参阅：https：//gist.github.com/DriesS/b72dce81113b8c5cc374 – SteenhouwerD

如果您使用'{React.cloneElement（this.props.children，{... this.props}）}'，则您正在有效地传递'children'作为“孩子”本身的支柱，从而创造出无限的等级。为什么你需要'React.cloneElement（）'？你可以直接渲染'this.props.children'。如果你真的需要传递所有的道具（为什么？我没有看到你使用它们），你可以做一些像'var {children，... rest} = this.props;'然后'React.cloneElement（孩子，休息）'。尽管如此，我仍然不明白。 –

渲染嵌套路线组件ReactJS

回答

相关问题