TLDR: 我正在创建一个简单的2页应用程序,它从两个页面访问状态对象,并想知道如何构建我的反应路由器(在此阶段,它太迟了,无法转移到redux:P)。
Codepen is here,但注意路由在codepen中不起作用。
有一个列表页面和一个包含更多详细信息的点击页面
详细信息页面(HolidayPage)链接到使用push browserHistory - 来使用状态对象中的对象属性
<Route path="/:HolidayId" component={HolidayPage}/>
我很困惑如何从这个HolidayPage
组件访问状态对象,因为它不是根应用程序的子项(因此不与状态对象相邻),我可以将状态对象作为此路由传递给财产?
在HolidayPage
组件中,我想要访问状态对象以输出该特定页面的假日详细信息,例如路由/holiday_2
将显示来自的对象数据 - {{1 }}
或者如果我使用嵌套的根并使用{this.props.children}(as seen here)将我的组件插入到根组件中,那么我很困惑如何将状态对象属性传递给插入的组件。
我的应用程序的状态对象为
state.holidays.holiday_2.details
像这样的路由设置 -
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);
},
显示假期ID,但我不确定如何显示此{this.props.params.HolidayId}
个对象的详细信息。
如果有人可以帮助我,我真的很感激! :)
答案 0 :(得分:1)
首先,由于您的状态是在路由之间共享的,因此您需要在路由器上方的React树中的某个位置保持该状态。请记住,数据只能传递下来。像这样:
var App = React.createClass({
getInitialState: function() {
// return your holdays object
},
render() {
return(
<Router>
<Route path="/" component={MainLayout}/>
<Route path="/:HolidayId" component={HolidayPage}/>
</Router>
)
}
然后你可以把假期信息作为路线的道具
render() {
return(
<Router>
<Route path="/" component={MainLayout} holidays={this.state.holidays} />
<Route path="/:HolidayId" component={HolidayPage} holidays={this.state.holidays}/>
</Router>
)
}
ReactRouter使路线道具可用于路线处理程序。现在,您可以通过MainLayout
评估HolidayPage
和this.props.route.holidays
的状态。您必须在HolidayPage组件中编写一个帮助程序,以便在给定holidayId的情况下获取适当的假期。类似的东西:
this.props.route.holidays['holiday_' + this.props.params.HolidayId]
答案 1 :(得分:1)
授予<HolidayPage />
对状态对象的访问权限,然后按ID查找。
var holidays = require ('./holidays.js');
class HolidayPage... {
render() {
return <div>
{ holidays[ this.props.params.HolidayId} ].name }
</div>;
}
}