Question

我正在研究我的第一个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）如果这是最好的行动方案。

Answer 1

尝试将props从render传递到您的组件客户端，如下所示：

export default class App extends React.Component {

  setHeaderTheme() {
   //code
  }

  render() {
    return (
        <Router>
            <div>
              <Header theme='light' />
              <Switch>
                <Route exact path='/' />
                <Route exact path='/about' component={About} />
                <Route exact path='/clients' render={() => <Clients setHeaderTheme={this.setHeaderTheme.bind(this)}/> } />
                <Route exact path='/services' component={Services} />
              </Switch>
            </div>
        </Router>
    );
  }
}

然后，在客户端内部，您可以通过以下方式从父级执行该功能：

this.props.setHeaderTheme();

Answer 2

通过以下代码

将其他参数传递给组件

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

or

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

然后在TestWidget上，您可以使用this.props.urlVariableHere

访问网址参数

请看看

Pass props to components

React url parameters

根据路由切换React组件属性

2 个答案: