传递道具给儿童使用路线

围绕我所问的问题有很多问题和答案，但我觉得我正在阅读它并正确应用它只是没有工作，我得到了我的undefined props每次。传递道具给儿童使用路线

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

让满足= { 标题： '有些标题'， };

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在对象中。

任何想法，为什么我误解？

谢谢！

来源

2017-04-25 PourMeSomeCode

看起来你正在使用react-router V4，您可以通过使用道具render代替component通过道具：

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

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

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

然而，这将重新创建每个渲染组件。

来源

2017-04-25 16:53:01

谢谢你的帮助！我的头几个小时都在砸我的头，不明白为什么它不工作。现在有道理:)再次感谢！ – PourMeSomeCode

完全没问题，乐于帮忙！ 'react-router'文档最近一直是一个移动的目标！ :-) –

您可能想补充一点，您还可以使用组件“} />'。而且如果你这样做的话，它有在每个渲染中重新创建组件的缺点，这是使用'render'的主要原因。 –

这是非常不完善的文件，但你应该使用this.props.route。

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

来源

2017-04-25 16:53:54 jered

只能用于React Router

传递道具给儿童使用路线

回答

相关问题