使用Route将道具传递给孩子

Question

关于我要问的内容有很多问题和答案，但我觉得我正在阅读它并正确应用它只是不起作用而且每次我的props都没有定义。

所以我在这里有我的父组件：

let meeting = {title：'some title'，};

Meteor.startup(() => {
  render((
    <Router>
      <div>
        <Nav />
        <Route exact path="/" component={Start} dataMeeting={meeting} />
        <Route path="/app" component={App} />
        <Modal />
      </div>
    </Router>
  ), document.getElementById('render-target'));
});

然后在我的另一个文件中，我的Start组件是我在this.props上做一个console.log

export default class Start extends Component {
  render() {
    console.log(this.props.dataMeeting);
    return (
      <div className="home">
        <p>test</p>
      </div>
    );
  }
}

在我的console.log我得到了未定义的，当我只是console.log ， this.props我无法在对象中看到我的dataMeeting 。

知道为什么我误会吗？

谢谢！

Answer 1

看起来你正在使用react-router v4，你可以使用render prop而不是component来传递props：

<Route path="/" render={()=><Start dataMeeting={meeting} />}/>

正如@ToddChaffe指出的那样，你可以（但不应该）以相同的方式使用component prop：

<Route path="/" component={()=><Start dataMeeting={meeting} />}/>

但是，这将在每个渲染上重新创建组件。

Answer 2

文档记录很差，但你应该使用this.props.route 。

export default class Start extends Component {
  render() {
    console.log(this.props.route.dataMeeting);
    return (
      <div className="home">
        <p>test</p>
      </div>
    );
  }
}