在父组件上设置属性

时间:2016-03-22 17:52:16

标签: reactjs react-router redux

我正在使用react-router和redux,我有以下export default class App extends Component { render() { return ( <div> <Header /> <PageTitle title="Projects" /> <div className="page-content"> {this.props.children} </div> </div> ); } } 组件:

export default (
  <Route path="/" component={App}>
    <IndexRoute component={ProjectsList} />
    <Route path="projects/:id" component={ProjectsShow} />
  </Route>
);

然后将此组件用于react-route:

title

我想根据我当前呈现的路由器组件动态地在<PageTitle title="Projects" />组件上设置redux-promise属性。

某些组件无法拥有固定标题,因为它们依赖于我当前正在显示的项目的信息,因此如果项目名为我的项目,那么&#39 ; s我想要显示的标题。

我也使用class ProjectsShow extends Component { static contextTypes = { router: PropTypes.object }; componentWillMount() { this.props.fetchProject(this.props.params.id); // I want to set the title of the `PageTitle` component // when this fetch is resolved } // (...) } 来解决我的所有承诺,我需要以某种方式根据组件上的承诺结果更新此外部组件。这是一个例子:

{{1}}

关于如何实现这一点的任何建议?

1 个答案:

答案 0 :(得分:1)

您可以创建一个额外的操作来更改标题,创建一个reducer,并将结果状态连接到您的组件。

WITH CTE
AS
(    
   SELECT  PriceCalendars.PriceProgramID, 
    PriceCalendars.EffectiveDateTime, 
    PriceSchedules.Price, 
    PriceSchedules.PLU, 
    items.Descr, 
    PriceSchedules.LastUpdate, 
    PriceSchedules.LastUpdatedBy, 
    PriceSchedules.RecordVersion, 
    PriceSchedules.PriceScheduleUniqueID,
    ROW_NUMBER() OVER (PARTITION BY PriceSchedules.RecordVersion ORDER BY PriceSchedules.LastUpdatedBy) AS RN
FROM            
    PriceCalendars 
    INNER JOIN PriceSchedules ON PriceCalendars.PriceProgramID = PriceSchedules.PriceProgramID 
    INNER JOIN items ON PriceSchedules.PLU = items.PLU
WHERE        
    (PriceSchedules.PLU = 'SLS10100103') 
    AND (PriceCalendars.EffectiveDateTime = '2016-03-22')
    )
    SELECT * FROM CTE WHERE RN=1

然后使用react-redux

中的connect()包装PageTitle组件

这正是redux可以做得很好的一种情况。