Question

我有一个带有一堆组件的React应用程序，并按以下方式构建

class App extends Component {
  render() {
    return (
      <Router>
        <ResponsiveDrawer>
          <div className="App">
              <div>
                <Route exact path="/" component={Administrator} />
                <Route path="/admin" component={Administrator} />
                <Route exact path="/jobs" component={Jobs} />
                <Route path="/jobs/:id" render={({match}) => <ViewJob id={match.params.id} />} />
                <Route path="/entries/:jobId/:entryId" render={({match}) => <Entry jobId={match.params.jobId} entryId={match.params.entryId} />} />
                <Route exact path="/reports" component={Reports} />
                <Route path="/reports/:jobId" render={({match}) => <JobReport id={match.params.jobId} />} />
                <Route path="/reports/activity" component={ActivityReport} />
              </div>
          </div>
         </ResponsiveDrawer>
     </Router>

    );
  }
}

export default App;

ResponsiveDrawer的一部分包含一个标题，我想根据用户当前所在的组件进行更改。有没有办法可以将道具传递给父母那样的？

Answer 1

如果您不使用redux，则可以根据location.pathname在ResponsiveDrawer组件的componentDidMount中添加switch-case语句。

Answer 2

您可以使用以下方法。

使用window.location.href读取当前页面的URL。在每个页面上都存在ResponsiveDrawer。因此，从当前URL，您可以在{{1}中映射页面的标题} component。
如果您正在使用ResponsiveDrawer，那么您可以在每个组件中更新商店中的全局标题变量。然后将redux连接到商店并显示标题。

Answer 3

也许你可以使用this.context.router尝试这样的事情。

class App extends Component {
  findComponent = () => {
    switch (this.context.router.history.location.pathname.split('/')[0]) {
      case 'admin':
        return 'Administrator';
      // ...
      default:
        return 'Administrator';
    }
  }

  render() {
    return (
     <Router>
       <ResponsiveDrawer component={this.findComponent()}>
         {/* Your routes */}
       </ResponsiveDrawer>
     </Router>
    );
  }
}

App.contextTypes = {
  router: PropTypes.object.isRequired,
};

当用户导航到React中的其他组件时，在App Bar中更改标题

3 个答案: