javascript - 使用状态变量作为样式道具值

Question

我有一个包含主题名称（Light、Dark 等）的状态变量。

在我的渲染函数中，我想根据主题为我的组件使用适当的样式。例如，如果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。

但我错了，这不起作用。无论如何我可以完成这项工作吗？

标签： javascriptcssreact-nativeecmascript-6

Answer 1

您还可以在 中使用三元运算符render()来根据您将引用的主题设置类this.state.theme。

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

然后在你的元素中，你会像这样使用它className：

<View className={classes}>

这是一个快速的 jsfiddle 示例。将状态选项从浅色改为深色，背景会发生变化：https ://jsfiddle.net/3516s2vg/

编辑：好的，所以如果您想在这里使用多个主题，一种选择可能是使用 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}>。