根据路由切换React组件属性

我正在开发我的第一个React项目，我对如何解决这种情况感到困惑。根据路由切换React组件属性

Header组件支持多种不同的主题，我需要根据所显示的页面切换。这是我的根组件：

export default class App extends React.Component { 
    render() { 
     return (
      <Router> 
       <div> 
        <Header theme='light' /> 
        <Switch> 
         <Route exact path='/' /> 
         <Route exact path='/about' component={About} /> 
         <Route exact path='/clients' component={Clients} /> 
         <Route exact path='/services' component={Services} /> 
        </Switch> 
       </div> 
      </Router> 
     ); 
    } 
}

的Header组件可以接收一个theme属性（的light之一，dark和solid）。我想从路由呈现的组件内部更改此属性。

我目前的想法是添加一个setHeaderTheme方法到App组件，并将这个函数传递给组件，但我不能解决a）如何通过路由传递附加属性到组件，b）如果这是平坦的最好的行动方针。

来源

2017-10-20 Sam Hastings

试图通过道具来从路线呈现方法您的组件的客户端，如下图所示：

this.props.setHeaderTheme();

来源

2017-10-20 11:23:26 dpetrini

谢谢你的建议看看。我能否问一个快速的后续问题，在Clients组件中设置标题主题的最佳位置在哪里？该命令是否属于生命周期回调？ –

看起来，标题最初有一个默认配置，您将在路由组件中进行更改。一旦进入像客户端这样的路由组件，您可以在早期的生命周期中更改标题，如componentWillMount（），因为您不会更改客户端组件的状态，也不会看到依赖关系。 – dpetrini

传递附加：

然后，内部的客户端可以从父母通过执行该功能参数组件通过以下代码路由

<Route path="/abc" render={()=><TestWidget num="2" someProp={100}/>}/> 

or 

<Route exact path="/abc" render={props => <TestWidget someProp="2" {...props} />} />

然后在TestWidget上哟ü可以只用this.props.urlVariableHere

访问URL参数，请对

Pass props to components

React url parameters

来源

2017-10-20 11:25:12 Asha

根据路由切换React组件属性

回答

相关问题