Question

围绕我提出的问题有很多问题和答案，但我觉得我正在阅读它并正确应用它只是不起作用而且我在＆＃39;我每次props都未定义。

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

让meeting = { 标题：＆＃39;一些标题＆＃39;， };

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组件的另一个文件中，我console.log上的this.props

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道具代替component传递道具：

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

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

<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>
    );
  }
}

使用Route将道具传递给孩子

2 个答案: