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使用camelcase表示法来表示样式，而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)
};

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