为什么'this.props.children' null 用于反应路由器（React-Redux）？答案

【问题标题】：Why is 'this.props.children' null to use for the react-router (React-Redux)?为什么'this.props.children' null 用于反应路由器（React-Redux）？
【发布时间】：2016-06-27 05:38:43
【问题描述】：

在我的根组件中，我设置了以下 react-router：

render(
  <div>
    <Provider store={store}>
      <Router history={hashHistory}>
        <Route
          component={HomePage}
          path="/"
        />
        <Route
          component={FirstPage}
          path="page1"
        />
        <Route
          component={SecondPage}
          path="page2"
        />
      </Router>
    </Provider>
  </div>,
  document.getElementById('app')
)

然后在我的“HomePage.js”中，如果点击以下内容，则可以转到“FirstPage”：

<RaisedButton
  containerElement={<Link to={`FirstPage`}/>}
  label="Sign In"
  labelColor='#88898C'
  labelStyle={{textTransform:'intial'}}
  style={styles.signIn}
/>

function mapStateToProps(state) {
  return state
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch)
  }
}

export default connect(
  mapStateToProps, mapDispatchToProps
)(HomePage)

在我的智能组件“FirstPage.js”中，渲染中只有：

{this.props.children}

然后：

function mapStateToProps(state) {
  return state
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch)
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(FirstPage)

根据点击的<Link/> 渲染组件，并使用正确的路径，但它显示{this.props.children} 为'null'。例如，如果调用path2，则{SecondPage} 会在FirstPage.js 中代替{this.props.children} 呈现。

在我添加HomePage.js 之前，单独定义{this.props.children} 效果很好。现在在我添加它之后，它说{this.props.children} 是'null'。可能是什么问题？任何指导或见解将不胜感激。先感谢您。

【问题讨论】：

你需要有嵌套路由才能渲染它的子组件（this.props.children）

标签： javascript reactjs redux react-router react-jsx

【解决方案1】：

它是空的，因为它没有孩子。

您应该在父 <Route> 中指定一个“智能组件”或“容器”。

例如如果你有这样的结构，你会使用 props.children：

<Route component={App}>
  <Route path="/" component={HomePage} />
  //...
</Route>

在这种情况下，您的 App 组件的 render() 方法中将包含 {this.props.children}。

【讨论】：