css - 使用 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>);
   }
});

问题是我在运行代码时收到此错误：“模块构建失败：错误：解析错误：第 5 行：意外令牌 -”显然，React 不喜欢其中font-size有破折号。我该如何解决这个问题？有什么方法可以逃避那个角色的反应吗？是否有一些不同的 css 属性可以更好地做出相同的事情？

谢谢！

Answer 1

使用fontSize代替font-size

解决方案是通常包含破折号的 camelCase 属性

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

回答了我自己的问题:)

Answer 2

As https://reactjs.org/docs/dom-elements.html says,
We need to remove '-' and upperCase except first word

Example-
background-color as backgroundColor,

Same will be applicable everywhere except a few as-

aria-* and data-*

example-

aria-label as aria-label 

Above worked for me!

Answer 3

我使用 fontSize: 像素数