Question

我想在我的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>

这不起作用。有办法吗？

Answer 1

您想要的是访问对象。括号表示法是您需要的

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

Answer 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>
);

如何在React中插入样式？

2 个答案: