TLDR访问状态对象: 我做一个简单的2页的应用程序,访问来自网页的状态对象,不知道如何构建我的反应路由器(和它的为时已晚在这个阶段转移到redux:P)。阵营路由器 - 动态路由 - 通过路由器
Codepen is here,但注意路由不codepen工作。
有一个列表页面,并通过网页上的点击有更多细节。
详细信息页面(HolidayPage)连接到使用推browserHistory使用对象属性从状态对象 -
<Route path="/:HolidayId" component={HolidayPage}/>
我很困惑,如何从这个HolidayPage
组件访问状态对象,因为它不是一个孩子根应用程序(因此不与状态对象相邻),我可以通过此路由状态对象作为属性?
在HolidayPage
组件中,我想要访问状态对象以输出特定页面的假期详细信息,例如,路径/holiday_2
会显示来自 - state.holidays.holiday_2.details
的对象数据。
或者,如果我使用嵌套根并使用{this.props.children}(as seen here)将我的组件插入到根组件中,那么我会混淆如何将状态对象属性传递给插入的组件。
我的应用程序有
holidays: {
holiday_1 : {
name : 'France',
details : 'Lorem ipsum dolor sit amet',
},
holiday_2 : {
name : 'Italy',
details : 'Lorem ipsum dolor sit amet',
},
holiday_3 : {
name : 'Spain',
details : 'Lorem ipsum dolor sit amet',
},
}
路由设置的,像这样一个状态对象 -
ReactDOM.render((
<Router history={browserHistory} >
<Route path="/" component={MainLayout} />
<Route path="/:HolidayId" component={HolidayPage}/>
</Router>
), document.getElementById('main'))
并引导到我使用这个代码的动态页面 -
gotoHoliday : function (e) {
e.preventDefault();
var HolidayId = this.props.index;
browserHistory.push(HolidayId);
},
在节假日页面上,我可以使用{this.props.params.HolidayId}
来显示节假日ID,但我不确定如何显示节日的详细信息是HolidayId
对象。
如果有人能帮助我,我会很感激! :)
如果有人回答了您的问题,请单击答案旁边的复选标记以标记为正确。如果不是,请更新问题以更具体。 –