使用ReactJS生成内联字体大小样式

Question

我正在尝试在ReactJS中做类似于这样的事情：

var MyReactClass = React.createClass({
    render: function() {
        var myDivText = "Hello!";
        var myFontSize = 6; //this is actually something more complicated, I'm calculating it on the fly
        var divStyle = {
            font-size: {fontSize + 'px !important;'},
        };
        return (<div style={divStyle}>{myDivText}</div>);
   }
});

问题是当我运行我的代码时，我遇到了这个错误："Module build failed: Error: Parse Error: Line 5: Unexpected token -"。显然，React 不喜欢 font-size 中有一个破折号。我该怎么解决这个问题呢？有没有什么方法可以为 React 转义这个字符？或者是否有一种不同的 CSS 属性，React 更喜欢并能达到同样的效果？

谢谢！

- kat

---

实际上是 JavaScript 先抛出错误。未引用的属性名称必须是有效的标识符名称或数字字面量。有效的代码应该是：{'font-size': '10px'}（带引号）。虽然我不确定 React 会如何处理它。 - David Hellsing

JavaScript确实对未引用的属性名称有限制，但如果我理解正确，这实际上是React样式对象中的一个键，而不是JavaScript属性。 - kat

camelCase 在行内起作用，而非驼峰式样式适用于样式表。样式表是一种常见的最佳实践，这样其他人就不必担心在密集的代码块中漏掉任何内容。很高兴你解决了这个问题！ - Jake Acosta

Answer 1

使用fontSize代替font-size

解决方法是用驼峰式命名属性，通常这些属性包含一个破折号

http://facebook.github.io/react/tips/inline-styles.html

自己回答了我的问题 :)

- kat

---

如果你有类似于-webkit-box-shadow这样的东西，只需将其写作webkitBoxShadow。 - Andy B

@AndyB，你需要将其以大写字母W开头的形式开始，这样它就应该是“WebkitBoxShadow”。React声明除了以“ms”开头的供应商前缀外，其他都要用大写字母。 https://facebook.github.io/react/tips/inline-styles.html - bradcush

Answer 2

我使用 fontSize: 像素数。

- Guille_2783

Answer 3

如https://reactjs.org/docs/dom-elements.html所述，
我们需要删除“-”并将除第一个单词外的所有单词转换为大写字母。
例如-
background-color将被转换为backgroundColor，
除了一些特殊情况外，这个规则适用于任何地方。

aria-* and data-*

例子 -

aria-label as aria-label 

对我来说以上方法有效！

- S.Yadav

---

您正在混淆 HTML 属性（例如 aria-label 和 data-*），请参考文档，以及使用内联样式创建的 CSS 属性，例如backgroundColor 和 WebkitTransition。 https://reactjs.org/docs/dom-elements.html#style - Arye Eidelman

不要感到困惑，应该使用backgroundColor而不是background-color。这很简单。 - S.Yadav