Question

我在代码中发表了评论。我试图让它尽可能简单明了。由于某种原因“.children”在“Index.js”或CompetitionsIndex组件中返回“null”，它不应该这样做，因为ViewCompetition组件是“routes.js”中看到的子组件

// routes.js

<Router history={hashHistory}>
    <Route   path='/'                        component={Main} >
      <IndexRoute                            component={Home} />
      <Route path="login"                    component={Login} />
      <Route path="logout"                   component={Logout} />
      <Route path="register"                 component={Register} />
      <Route path="CompetitionIndex"         component={CompetitionIndex} >
        <Route path="/ViewCompetition/:id"   component={ViewCompetition} />
	  </Route>
      <Route path="CreateCompetition"        component={CreateCompetition} />
      <Route path="EditCompetition/:id"      component={EditCompetition} />
      <Route path="dashboard"                component={Dashboard} onEnter={requireAuth} />
    </Route>
  </Router>

// Main.js

export default class Main extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      loggedIn: false,
      userRole: null
    }
  }

  // ... methods and stuff
	
  render() {
    let childrenWithProps = React.cloneElement(this.props.children, {userRole: this.state.userRole});

    return (
        <div className="container">
          <div className="row">
            {childrenWithProps}
          </div>
        </div>
    )
  }
}

// Dashboard.js

export default class Dashboard extends React.Component {
  render() {
    let userRole = this.props.userRole // Works Like a charm!!!

    return(
      <div className="col-sm-6 col-sm-offset-3">
        <p> DASHBOARD (A Secure Route)</p>
      </div>
    )
  }
}


// Everything above works great! 
// Now check out the same exact pattern below
// I'm trying to pass props(editableDoc) from CompetitionIndex to it's child component/route ViewCompetition
// The same EXACT way I passed props(userRole) from Main to it's child component/route dashboard


// Index.js

export default class CompetitionIndex extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      error: false,
      docList: [],
      editableDoc: []
    }
  }

  handleView(docId) {
    db.get(docId).then((doc) => {

      this.setState({
        editableDoc: doc
      })
      this.context.router.push(`/ViewCompetition/${doc._id}`)
    }).catch((err) => {
      console.log(err)
      this.setState({
        error: err
      })
    })
  }

  componentDidMount() {
	// some code
  }

  render() {
    let FML = React.cloneElement(this.props.children, {editableDoc: this.state.editableDoc});

    return(
        <div>{FML}</div>
    )
  }
}

// Before even getting to render() the View.js below I get this shitty Error
// bundle.js:967 Uncaught TypeError: Cannot read property 'props' of null
// After console logging a bunch I realize everything is ok until I call `.children`, so there's no children?
// How da puck is that possible When I'm doing the EXACT same thing with Main and dashboard...???


// View.js

export default class ViewCompetition extends React.Component {
  render() {
    console.log("editableDocument", this.props.editableDoc)
    return(
      <div></div>
    )
  }
}

Answer 1

我在<IndexRoute component={whatever} />

中添加<Route component={CompetitionIndex} >解决了这个问题

这使我能够将道具从“CompetitionIndex”传递到“ViewCompetition”

为什么这会解决我不确定的问题。我能想到的是，如果你想要从父母那里传递道具，那么每个级别必须有<IndexRoute/>的嵌套路线。

尝试将props传递给子组件/路由但“.children”返回null

1 个答案: