如何在react中编写内联样式

Question

这条线有什么问题吗？

var firstColStyle = {text-align: right};

这有效：

var firstColStyle = {width: 70};

似乎是一种奇怪的样式语法。 关于这个问题的文档非常差。 如何使元素具有反应性，所以我不能使用

20%

代替

300px

。

Answer 1

将firstColStyle更改为：

var firstColStyle = { textAlign: 'right' }

如果您必须设置 px，您可以：

var someSize = { width : '2px' }

如果百分比：

var otherWidth = { width : ' 10%' }

Answer 2

text-align

不是有效的 Javascript 标识符，因此您不能将其用作代码中文字表达式的一部分。以下所有示例都因同样的原因而失败。

var text-align = 'right';
style.text-align = 'right';
var style = { text-align: 'right' };

使用字符串创建属性是有效的。

style['text-align'] = 'right';
// or
var style = { 'text-align': 'right' };
// or
const prop = 'text-align';
const style = { [prop]: 'right' };

但是，这打破了常规的 Javascript 变量命名约定，并迫使您使用访问器表示法编写代码。

您会发现样式元素的原生 API 使用驼峰表示法来表示样式，而 React 遵循了现有约定。

// existing style api
document.body.style.textAlign = 'red';

React 支持单位的唯一方法是将它们指定为字符串，因此要使用

70%

，您需要编写

'70%'

。

我个人认为这有点混乱。我最近一直在使用 Garden（一种用 Clojure 编写 CSS 的方法），它提供了一些用于指定单位的函数。如果我要在 React 中使用内联样式，我会很想在 Javascript 中重新创建它们。

类似这样的：

import { px, em, percent } from 'units';

var width = 30;

const style = {
  height: px(width * 2),
  width: px(width),
  margin: percent(5)
};

这使您能够将单位保留为数字变量，这意味着您可以使用它们进行数学运算，而无需编写任何令人讨厌的字符串连接代码。