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

Question

在我的根组件中，我设置了以下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 ，则会在FirstPage.js呈现{SecondPage}来代替{this.props.children}。

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

Answer 1

由于没有子项，因此为空。

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

例如，如果您具有如下结构，则可以使用props.children：

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

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