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，则会在{SecondPage}中呈现FirstPage.js代替{this.props.children}。

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

Answer 1

它是null，因为它没有孩子。

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

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

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

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

为什么'this.props.children'null用于react-router（React-Redux）？

1 个答案: