将 props.children 从容器组件传递到展示组件答案

【问题标题】：Passing props.children from a container component to a presentational component将 props.children 从容器组件传递到展示组件
【发布时间】：2018-09-21 09:07:37
【问题描述】：

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

当我走到正确的路径 "...index/overview" 时，会显示 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>
        );
    }

【问题讨论】：

你想使用儿童特定的属性吗？

标签： reactjs routing children react-props

【解决方案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>

【讨论】：

this.props.children 实际上不是未定义的，当我 console.log 它在 IndexZoomViewPanelContainer 中时：i.gyazo.com/11b6bd2e664b76027698f36b06e2c7ac.png。我不能按你说的做，因为我不想每次都显示OverviewComponent，我想做路由并显示正确的组件。
@amaurygl 正如您在屏幕截图中看到的那样，它不是一个有效的反应元素，这就是错误所说的。

【解决方案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 组件中创建嵌套路由。

【讨论】：