Как правильно добавить класс к компоненту страницы?

Question

[Игорь]

Есть сайт, работающий на react+redux+react-router. У всех страниц ощий layout, который описан в App компоненте. Возникает ситуация, когда необходимо при переходе на разные страницы добавлять к блоку-обертке (в компоненте App) классы. Например (блок .wrapper), на странице list должен быть класс .wrapper--list, на pages wrapper--pages. Как это сделать правильнее? Сейчас это происходит следующим образом - есть reducer (dom.js), в нем все необходимое состояние для классов. При загрузке компонента страницы происходит:
dispatch ({type: CHANGE_WRAPPER ....})
Но мне кажется, что это как-то неоптимально каждый раз обновлять целиком состояние просто для того, чтобы изменить класс. Есть какие-нибудть варианты, применяемые на практике?

Answer 1

[Никита Гущин]

Если у вас роутер не 4й версии, то можно попробовать добавить к роутам свойство wrapperClass

<Route path="/" component={App}>
  <Route path="list" component={ListComponent} wrapperClass="wrapper--list" />
</Route>

Идеологически, конечно, не очень хорошо мешать стили и конфигурацию роутов. Но зато: в своем компоненте App вы можете достать эти значения безо всяких редьюсеров\диспатчей:

render() {
  // routes - это массив роутов для текущей локации
  // если взять за основу конфигурацию роутов, которую я привел выше,
  // то при переходе по пути /list в массиве будет два элемента.
  const { children, routes } = this.props
  const wrapperClass = (_.findLast(routes, route => !!route.wrapperClass) || {}).wrapperClass
  
  return (
    <div className={wrapperClass}>
      {children}
    </div>
  )
}

Comments

[Игорь]

Спасибо, воспользуюсь вашим решением!

Answer 2

[Максим]

Не могу сказать "хорошо/плохо/как лучше", так как всего примера не вижу, но если хотим сделать "как-то еще", то
можно использовать объект location

Например:

generateClassNames() {
    if (location.href.indexOf('list') {
        return '.wrapper--list'
    }
    ...
}
...
render()
....
let myClass = this.generateClassNames()
...
<div classNames={myClass}>
...

Так же, для работы с классами, удобно использовать пакет classnames

Comments

[Игорь]

Если так проверять, то я буду дублировать роутинг и в компонентах, которые про роуты вообще ничего знать не должны по-хорошему, поэтому сейчас и сделано через отдельный reducer

[Максим]

Игорь: ок. Вполне оправдано. Обкатайте немного вашу схему, разберите эту проблему в виде статьи на хабре, там и народ сразу подтянется (с критикой и решениями).