Question

我正在尝试使用react-router构建一些嵌套路由。

我的路线设置如下：

  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App}>
        <Route component={Main}>
          <IndexRoute component={RepositoryList} />
          <Route path="profile" component={Profile} />
        </Route>
        <Route path="login" component={Login} />
        <Route path="admin" component={Admin} />
      </Route>
    </Router>
  </Provider>

App组件将redux状态和操作连接到ViewWrapper与connect(mapStateToProps, mapDispatchToProps)(ViewWrapper)的道具。

ViewWrapper render方法包含{React.cloneElement(this.props.children, this.props)}以及其他一些全局元素。

现在Main包含以下内容：

render() {
    return (
      <div className={styles.main}>
        <Banner {...this.props} />
        {React.cloneElement(this.props.children, this.props)}
      </div>
    )
  }

我的理解是RepositoryList或Profile会被拉入{React.cloneElement(this.props.children, this.props)}，具体取决于所遇到的路线。这是我遇到问题的地方，有一个无限循环产生以下错误。

TypeError：无法读取属性＆＃39; __ reactInternalInstance $ s50mbbsix2n2nxx9dg8gmbo6r＆＃39;为null

我的直觉告诉我Main在传递this.props时试图将自己嵌入其中。

我觉得这一定是一个常见的问题，但没有找到适用于我的案例的解决方案，任何帮助都表示赞赏。

Answer 1

非常感谢@Yongzhi指出我正确的方向。

好的，事实证明我一直在以错误的方式使用redux。我正在通过{... this.props}向所有要求他们的孩子传递道具，这些孩子将每个组件连接到商店中的绝对所有东西。当时这看起来很昂贵，但我跟它一起去了。这意味着儿童道具被覆盖了。它以递归方式嵌套自己。

事实证明，我应该使用react-redux connect方法将每个组件仅连接到商店的相关部分。之后，使用{this.props.children}简单地为我的嵌套组件工作。

一个完整的例子：

import React from 'react'
import { connect } from 'react-redux'

const Component = React.createClass({
  render() {
    return (
      <div>
        <p>{this.props.globals.heading}</p>
        {this.props.children}
      </div>
    )
  }
})

function mapStateToProps(state) {
  return { globals: state.globals }
}

export default connect(mapStateToProps)(Component)

如果有人在同一条船上，read this page on the connect method并且一切都会变得非常清楚。

反应路由器儿童陷入无限循环

1 个答案: