如何在反应中编写内联样式答案

【问题标题】：How to write inline styles in react如何在反应中编写内联样式
【发布时间】：2016-04-14 17:09:02
【问题描述】：

这条线有什么问题？ var firstColStyle = {text-align: right};

这有效： var firstColStyle = {width: 70};

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

致以最诚挚的问候

格哈德

【问题讨论】：

标签： reactjs

【解决方案1】：

将 firstColStyle 更改为：

var firstColStyle = { textAlign: 'right' }

如果你必须设置 px 你可以：

var someSize = { width : '2px' }

如果百分比：

var otherWidth = { width : ' 10%' }

【讨论】：

在 React 中，您甚至不需要为许多样式属性指定 px。你可以简单地做var someSize = {width: 2}，它将被转换为像素。 React 会自动为某些数字内联样式属性附加一个“px”后缀。如果要使用“px”以外的单位，请将值指定为具有所需单位的字符串。有些单位接受数字，不附加“px”。

【解决方案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)
};

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

【讨论】：

这看起来应该已经存在了。没有类似的吗？
@VitalyB 据我所知，可能太简单以至于无法保证 npm 包。 let unit = u => x => `${x}${u}`; let px = unit('px'); let em = unit('em'); let percent = unit('percent');
看看这个itnext.io/…