Передача props.children из контейнерного компонента в презентационный компонент

Question

Я делаю некоторую маршрутизацию, я хочу попробовать отобразить IndexZoomOverviewContainer into IndexZoomViewPanelContainer,

Когда я иду по правильному пути "... индекс / обзор", IndexZoomViewPanelContainer отображается, но когда я прохожу детей (маршрут для IndexZoomOverviewContainer в данном случае) из контейнера (IndexZoomViewPanelContainer) для просмотра (IndexZoomViewPanelComponent), он не отображается и выдает ошибку:

Снимок экрана ошибки: https://i.gyazo.com/990f92d3058806baa576dca5247ace9e.png

Когда я удалил this.props.children, это не показывает какую-либо ошибку.

Вот маршрутизация:

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

IndexZoomViewPanelContainer:

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

    componentDidMount() {
    }

    componentWillUnmount() {
    }

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

IndexZoomViewPanelComponent:

function IndexZoomViewPanelComponent(props) {
        const tabs = getTabs();
        return (
            <div className="container">
                <viewPanel.ViewPanel title={"Index Zoom"}
                    authKey={perm.INDEX_ZOOM_VIEWPANEL_PERM}
                    path={route.APP_PATH}
                    getPermStateFunc={(state) => state.MENUPERMS}
                >
                    <TabControl tabs={tabs} selected={route.INDEX_ZOOM_OVERVIEW_RELATIVE_PATH}>
                        {props.children}
                    </TabControl>
                </viewPanel.ViewPanel>
            </div>
        );
    }

Answer 1

Вот способ достичь того, что вам нужно на маршруте:

// 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 для получения дополнительной информации.

Answer 2

Я хочу попробовать отобразить 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>