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>);
   }
});

问题是我在运行代码时遇到此错误：＆＃34;模块构建失败：错误：解析错误：第5行：意外令牌 - ＆＃34; 显然，React不喜欢font-size中有一个破折号。我该如何解决这个问题？有没有办法逃脱这个角色的反应？是否有一些不同的css属性反应更好，做同样的事情？

谢谢！

Answer 1

使用fontSize代替font-size

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

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

回答了我自己的问题：）

Answer 2

我使用fontSize：pixels numbers

Answer 3

正如https://reactjs.org/docs/dom-elements.html所说，
我们需要删除'-'和upperCase，除了第一个单词

示例-
background-color as backgroundColor,

除了少数几个-

aria-* and data-*

示例-

aria-label as aria-label

以上为我工作！

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

3 个答案: