Question

我正在路由，我想尝试显示IndexZoomOverviewContainer into IndexZoomViewPanelContainer。

当我转到正确的路径“ ...索引/概述” 时，将显示IndexZoomViewPanelContainer，但是当我经过孩子时（{{1}的路线}，从容器（IndexZoomOverviewContainer）到视图（IndexZoomViewPanelContainer）的情况下，它不会显示并给我一个错误：

错误ScreenShot：https://i.gyazo.com/990f92d3058806baa576dca5247ace9e.png

当我移除IndexZoomViewPanelComponent时，它没有显示任何错误。

以下是路由：

this.props.children

IndexZoomViewPanelContainer：

<Route className="fullHeight fullWidth" key="indexzoom" path="index/" component={indexmonitor.IndexZoomViewPanelContainer} >
     <Route className="fullHeight fullWidth" key="indexzoom1" path="overview" component={indexmonitor.IndexZoomOverviewContainer} />
     <Route className="fullHeight fullWidth" key="indexzoom2" path={routes.INDEX_ZOOM_CONSTITUENTS_RELATIVE_PATH} component={dashboard.DashboardListContainer} />
 </Route>

IndexZoomViewPanelComponent：

class IndexZoomViewPanelContainer extends React.Component {
    constructor(props) {
        super(props)
    }

    componentDidMount() {
    }

    componentWillUnmount() {
    }

    render() {
        return <IndexZoomViewPanelComponent>
                  {this.props.children}
               </IndexZoomViewPanelComponent>;
    }
}

Answer 1

我想尝试将 IndexZoomOverviewContainer 显示到 IndexZoomViewPanelContainer

<Route className="fullHeight fullWidth" key="indexzoom" path="index/" 
component={indexmonitor.IndexZoomViewPanelContainer} >

IndexZoomViewPanelContainer呈现为路由的一部分，没有任何子项

所以

return <IndexZoomViewPanelComponent>{this.props.children}</IndexZoomViewPanelComponent>

在上述脚本中，this.props.children是未定义的，它将引发您共享的错误。

为了解决这个问题，应该是

 return <IndexZoomViewPanelComponent><IndexZoomOverviewContainer /></IndexZoomViewPanelComponent>

Answer 2

这是一种实现您在路线中所需的方法：

// I'm renaming your components and removing className/key for readability

<Route path="/index" render={() => (
  <IndexZoomViewPanelContainer>
    <Route path="/index/overview" component={IndexZoomOverviewContainer} />
  </IndexZoomViewPanelContainer>
  )}
/>

您还可以直接在IndexZoomViewPanelContainer组件中创建嵌套路由。

有关更多信息，请参见https://reacttraining.com/react-router/core/api/Route/render-func。

将props.children从容器组件传递到演示组件

2 个答案: