Question

我有一个状态变量，用于保存主题的名称（浅色，深色等）。

在我的渲染功能中，我想根据主题为组件使用适当的样式。例如，如果在{mainHeader“类上使用DarkTheme，则View组件的样式将如下所示：

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

如果主题是LightTheme，则应该是：

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

为了提高效率，我认为如果将主题名称放在状态变量中，则可以执行以下操作：

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

期望评估主题变量以返回 LightTheme.mainHeader 或 DarkTheme.mainHeader。 < / p>

但是我错了，这行不通。反正我可以做这个工作吗？

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

您可以：

将实际主题对象置于状态或
在style属性中编写一条语句，该语句对state.theme上的字符串求值并返回实际对象。（还没有尝试过，但是我相信它会起作用）

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

在React中，关于内联样式的答案很不错：React.js inline style best practices（@ 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>

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

3 个答案: