使用状态变量作为样式属性值

Question

我有一个状态变量，它保存主题的名称(浅色、深色等(。

在我的渲染函数中，我想根据主题为我的组件使用适当的样式。例如，如果DarkTheme用于"mainHeader"类，则视图组件的样式将如下所示：

<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 语句来指定特定的类。我不是反应专家，所以我什至不确定这是否是最好的方法。开关也会进入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 2

您可以：

1. 将实际主题对象置于状态或
2. 在 style 属性中编写一条语句，该语句计算 state.theme 上的字符串并返回实际对象。(没有尝试过这个，但我相信它会起作用(

但是，是的，您不能用串联来组合这样的对象名称，或者至少不容易。

这里有一个关于 React 中内联样式的好答案：React.js 内联样式最佳实践(来自 @chantastic 的第一个答案(

值得一提的是，我在我的投资组合页面上做了这样的事情，它使用主题提供程序和样式化组件，您可以在此处查看该功能的代码：https://github.com/xezian/xezian/blob/master/client/src/components/Page/Page.js

Answer 3

尝试存储样式值，而不是将主题名称存储在状态中。

this.state = {
   theme: DarkTheme.mainHeader 
}

并直接使用状态值

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