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

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

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

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

然后在您的元素中，您将像使用 className 一样使用它:

<View className={classes}>

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

编辑:好的，如果您想在这里使用多个主题，一种选择是使用 switch 语句来指定特定的类。我不是 react 专家，所以我什至不确定这是否是解决此问题的最佳方法。开关也将进入 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}> .