Реакция Это хороший способ использовать имена классов для управления несколькими темами?

Question

Рассмотрим следующий код: -

  render() {
      const headerClasses=classnames({
        "Header":true,
        "Header---dark":this.props.theme.dark,
        "Header--light":this.props.theme.light
      })
    return (
      <div className={headerClasses}>
            Header content goes here
      </div>
    )
  }

Мое приложение будет иметь только две темы.один темный и один светлый.Я пытаюсь сохранить тему в избыточном хранилище и соответственно изменяю имена классов, используя имена классов.Это правильный подход или анти-паттерн?Какой самый простой способ управлять темой в более крупном приложении?

Answer 1

1. Имеет атрибут состояния с темой и всеми соответствующими данными
2. Установите тему ваших компонентов на this.props.currentTheme
3. Когда вы меняете тему, вы просто меняетеданные в currentTheme и все остальное тоже будут меняться