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

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

0 голосов
/ 21 сентября 2018

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

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

Ошибка ScreenShot: 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>
        );
    }

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

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

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

0 голосов
/ 21 сентября 2018

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