CSS 使用 ReactJS 生成内联字体大小样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26759819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Generating inline font-size style using ReactJS
提问by kat
I am trying to do something like this in ReactJS:
我正在尝试在 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>);
}
});
The problem is that I get this error when I run my code:
"Module build failed: Error: Parse Error: Line 5: Unexpected token -"
apparently, React doesn't like that font-sizehas a dash in it. How do I get around this? Is there some way to escape that character for react? Is there some different css property that react likes better that does the same thing?
问题是当我运行我的代码时出现这个错误：“模块构建失败：错误：解析错误：第 5 行：意外的令牌 -”显然，React 不喜欢里面font-size有破折号。我该如何解决这个问题？有什么办法可以逃避那个角色的反应吗？是否有一些不同的 css 属性可以更好地做出同样的事情？
Thanks!
谢谢！
回答by kat
Use fontSizeinstead of font-size
使用fontSize代替font-size
the solution is to camelCase properties which usually contain a dash
解决方案是使用通常包含破折号的camelCase属性
http://facebook.github.io/react/tips/inline-styles.html
http://facebook.github.io/react/tips/inline-styles.html
Answered my own question :)
回答了我自己的问题:)
回答by Guille_2783
I use fontSize: pixels numbers
我使用 fontSize: 像素数
回答by S.Yadav
As https://reactjs.org/docs/dom-elements.htmlsays,
We need to remove '-' and upperCase except first word
正如https://reactjs.org/docs/dom-elements.html所说，
除了第一个单词，我们需要删除 '-' 和 upperCase
Example-background-color as backgroundColor,
例子-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!
以上为我工作！
