渲染特定兄弟组件时，Reactjs 样式组件不同答案

【问题标题】：Reactjs style component differently when specific sibling component is rendered渲染特定兄弟组件时，Reactjs 样式组件不同
【发布时间】：2017-09-12 06:50:24
【问题描述】：

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

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>
    );
  }

我想出但不想使用的骇人听闻的解决方案：

在每个组件中单独渲染<TopBar>，并在PublicProfilePage 中渲染时将道具传递给它以使用不同的类名
在组件安装商店PublicProfilePage 内部<TopBar> classNames，在组件的持续时间内更改它们，在组件上下马后重新设置类名

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

还有另一个简单的选择。

用withRouter 高阶组件包装您的TopBar 组件。

export default withRouter(TopBar);

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

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

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

【讨论】：