2016-09-24 305 views
0

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

如果有人能帮助我,我会很感激! :)

+0

如果有人回答了您的问题,请单击答案旁边的复选标记以标记为正确。如果不是,请更新问题以更具体。 –

回答

1

因此,首先,因为你的状态路由之间共享你需要的地方保持这种状态在路由器上面的阵营树。请记住,只能传递数据。事情是这样的:

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使得路线道具提供给路由执行。因此,现在您可以通过this.props.route.holidays来评估MainLayoutHolidayPage的状态。您必须在您的HolidayPage组件中编写一个助手才能获取给定holidayId的适当假日。喜欢的东西:

this.props.route.holidays['holiday_' + this.props.params.HolidayId] 
1

给你<HolidayPage />访问状态对象,只是看它的ID。

var holidays = require ('./holidays.js'); 

class HolidayPage... { 
    render() { 
     return <div> 
      { holidays[ this.props.params.HolidayId} ].name } 
     </div>; 
    } 
}