Question

假设我的App.js渲染包含下面定义的路由，<TopBar>是网站的导航，它会在页面上呈现，而不管路由上方定义的路由是什么，以及我是什么想要完成的是在呈现<TopBar>时与/:username组件的样式不同，而不是在呈现前4个组件时。

App.js

render() {
    return (
      <Router>
        <div className={classnames('app_warapper', {user_app_wrapper:this.props.isAuthenticated, guest_app_wrapper: !this.props.isAuthenticated})}>
          <div className="App">
            <TopBar />
            <Switch>
              <Route exact path="/" component={HomePage} />
              <Route exact path="/login" component={LoginPage} />
              <Route exact path="/signup" component={SignupPage} />
              <Route exact path="/reset" component={ResetPasswordPage} />
              <Route exact path="/reset/:id" component={ResetPasswordPage} />
              <Route exact path="/create-username" component={isAuthenticated(UsernameCreation)} />
              <Route exact path="/dashboard" component={isAuthenticated(DashboardPage)} />
              <Route exact path="/edit-scope/:id" component={isAuthenticated(EditScope)} />
              <Route exact path="/profile" component={isAuthenticated(ProfilePage)} />
              <Route exact path="/logout" component={isAuthenticated(Logout)} />
              <Route exact path="/:username" component={PublicProfilePage} />
              <Route component={NotFound} />
            </Switch>
          </div>
        </div>
      </Router>
    );
  }

我提出的Hacky解决方案，我不想使用：

在每个组件中单独渲染<TopBar>并在其中传递道具，以便在PublicProfilePage内呈现时使用不同的classNames
组件装载商店PublicProfilePage内的<TopBar>内 classNames，在组件的持续时间内更改它们越狱将classNames设置回来

Answer 1

还有另一种简单的选择。

使用withRouter更高阶的组件包裹您的TopBar组件。

export default withRouter(TopBar);

它会将match，location，history作为道具注入您的TopBar组件，并在每次路线更改时重新渲染组件。因此，您可以根据需要有条件地渲染基于这些道具的组件。

render() {
    const { match, location, history } = this.props

    return (
      //...your conditional JSX for TopBar
    )
}

呈现特定兄弟组件时，Reactjs样式组件的方式不同

1 个答案: