Используйте переменную состояния в качестве значения стиля реквизита

Question

У меня есть переменная состояния, которая содержит название темы (Светлая, Темная и т. Д.).

В моей функции рендеринга я хотел бы использовать соответствующий стиль для своих компонентов на основе темы.Например, если DarkTheme используется в классе «mainHeader», стиль компонента View будет выглядеть примерно так:

<View style = {DarkTheme.mainHeader}>
</View>

Если тема LightTheme, то она должна быть:

<View style = {LightTheme.mainHeader}>
</View>

Из соображений эффективности я подумал, что, если поместить имя темы в переменную состояния, я мог бы сделать что-то вроде этого:

<View style = {{this.state.theme + '.mainHeader'}}>
</View>

Ожидается оценка темыпеременная для возврата либо LightTheme.mainHeader или DarkTheme.mainHeader.

Но я ошибаюсь, это не такРабота.Можно ли как-нибудь сделать эту работу?

Answer 1

Вместо сохранения названия темы в состоянии, попробуйте сохранить значение стиля.

this.state = {
   theme: DarkTheme.mainHeader 
}

И напрямую использовать значение состояния

<View style = {this.state.theme}>
</View>

Answer 2

Вы также можете использовать троичный оператор внутри render(), чтобы установить классы на основе темы, на которую вы бы ссылались this.state.theme.

const classes = this.state.theme === 'dark' ? style.dark : style.light;

Затем в вашемэлемент, который вы бы использовали, например, с className:

<View className={classes}>

Вот краткий пример jsfiddle.Измените параметр состояния со светлого на темный, и фон изменится: https://jsfiddle.net/3516s2vg/

Edit: Ok, поэтому, если вы хотите использовать более одной темы здесь, одним из вариантов может быть использование оператора switch для указанияконкретный класс.Я не эксперт по реагированию, поэтому я даже не уверен, что это будет лучшим способом для этого.Переключатель также входит внутрь render().

let classes = '';

switch(this.state.theme) {
  case 'dark':
    classes = style.dark;
    break;
  case 'light':
    classes = style.light;
    break;
  case 'other':
    classes = style.other;
    break;
  default:
    classes = style.dark;
}

. И снова, чтобы использовать его, вы должны сделать <View className={classes}>.

Answer 3

Вы можете либо:

1. поставить фактический объект темы в состояние, либо
2. записать оператор в атрибуте стиля, который оценивает строку в state.theme и возвращает фактический объект,(еще не пробовал, но я думаю, что это сработает)

Но да, вы не можете составить такое имя объекта с помощью конкатенации, или, по крайней мере, нелегко.

Вот отличный ответ о встроенных стилях в React: Лучшие практики встроенного стиля React.js (1-й ответ от @chantastic)

Стоит отметить, что я сделал что-то подобное на своей странице портфолио, где используютсяпоставщик тем и стилизованные компоненты, и вы можете увидеть код этой функциональности здесь: https://github.com/xezian/xezian/blob/master/client/src/components/Page/Page.js