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

Posted 2023-03-06

【中文标题】使用 ReactJS 生成内联字体大小样式

【英文标题】：Generating inline font-size style using ReactJS

【发布时间】：2015-01-01 19:11:25

【问题描述】：

我正在尝试在 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 属性可以更好地反应喜欢做同样的事情？

谢谢！

【问题讨论】：

实际上是 javascript 首先抛出错误。不带引号的属性名称必须是有效的标识符名称或数字文字。有效代码为：'font-size': '10px'（带引号）。虽然我不确定 React 会如何处理它。

确实，JavaScript 对不带引号的属性名称有这些限制，但如果我理解正确的话，这实际上是 React 样式对象中的键，而不是 javascript 属性

camelCase 内联工作，非camel 样式在样式表中工作。样式表是一种常见的最佳实践，因此其他人不必担心在密集的代码块中遗漏任何内容。不过很高兴你想通了！

【参考方案1】：

使用fontSize 而不是font-size

解决方案是通常包含破折号的驼峰式属性

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

回答了我自己的问题:)

【讨论】：

如果你有类似的东西：-webkit-box-shadow，那么就放 webkitBoxShadow

@AndyB 您实际上需要以大写 W 开头，因此它将是“WebkitBoxShadow”。 React 声明除 ms 之外的供应商前缀以大写字母开头。 facebook.github.io/react/tips/inline-styles.html

【参考方案2】：

我使用 fontSize: 像素数

【参考方案3】：

正如https://reactjs.org/docs/dom-elements.html 所说， 我们需要删除除第一个单词外的“-”和大写

例子-background-color as backgroundColor,

除了少数之外，其他地方都适用-

aria-* and data-*

例子-

aria-label as aria-label 

以上对我有用！

【讨论】：

您混淆了 aria-label 和 data-* 等 HTML 属性、[casing-docs](reactjs.org/docs/dom-elements.html) 以及使用 backgroundColor 和 WebkitTransition 等内联样式创建的 CSS 属性reactjs.org/docs/dom-elements.html#style

没有什么可混淆的，而不是背景颜色需要使用背景颜色。就是这么简单。