如何在 React 中插入样式？答案

【问题标题】：How to interpolate styles in React?如何在 React 中插入样式？
【发布时间】：2017-02-10 20:06:39
【问题描述】：

我想在我的 React 应用程序中按语言对单词进行颜色编码。我有一个styles 文件，其中包含以下内容：

english: {
  // style here
}

french: {
  // style here
}

spanish: {
  // style here
}

// etc.

我的每一个词 (entrys) 都是一个包含 language 键/值对的对象，即 {language: french}。

我可以创建一个很长的case/switch 语句，但我正在寻找一种更短的方法。这是我的case/switch 声明：

var color;

switch (entry.language) {
  case 'english':
    color = styles.english;
    break;
  case 'french':
    color = styles.french;
    break;
// etc.

<div style={color}> {entry.word} </div>

这似乎是不必要的重复，特别是如果我有很多语言。相反，我希望能够将entry.language 插入到我的div 中，例如：

<div style={styles.{entry.language}} {entry.word} </div>

这行不通。有办法吗？

【问题讨论】：

标签： reactjs styles

【解决方案1】：

你想要的是访问一个对象。括号符号是你需要的

<div style={styles[entry.language]} >{entry.word} </div>

【讨论】：

是的！完美的。谢谢！
很高兴有帮助:)

【解决方案2】：

我偶然发现这个页面有一个类似的问题，但最终找到了答案来自https://medium.com/capital-one-developers/cut-the-sass-how-to-use-inline-javascript-styles-for-everything-f5ac5b77ae57

import React from 'react';
import { StyleSheet, css } from 'aphrodite';
import { brandRed } from './colors'; 

const styles = StyleSheet.create({ 
  foo: { 
    border: `1px solid ${brandRed}`,
  },
});

const UserMenu = () => (
  <div className={css(style.foo)}>
    This box has a nice border.
  </div>
);

【讨论】：