HTML 到 jsx 转换器不保留 css 单位
HTML to jsx converter not preserving css units
我正在使用 HTML 到 react.js 的 JSX 转换器，在此处演示：
https://magic.reactjs.net/htmltojsx.htm
并注意到一个奇怪的行为。
翻译这段代码时：
<div style="font-size: 14px; line-height: 14px">Hello world</div>
return 短语中的翻译是：
<div style={{ fontSize: 14, lineHeight: 14 }}>Hello world</div>
请注意，“px”被删除了。现在虽然这对“fontSize”功能没问题，但 css 中的“lineHeight”行为完全不同，行高 14 根本不等于 14px。
任何建议的解决方法或解释将不胜感激。
这是一个已知行为，可能是一个错误。但是，MDN 不鼓励对 line-height.
使用单位指定值
因为您已经为那个元素指定了 font-size（并且因为它正确地解析了它）所以您真的不需要为您的 line-height 使用 px-values，因为然后它将引用元素的 font-size 属性.
The used value is this unitless number multiplied by the element's font size. The computed value is the same as the specified number. In most cases this is the preferred way to set line-height with no unexpected results in case of inheritance.
相反，只需执行：
<div style="font-size:14px; line-height:1">Hello world</div>
这应该与将 line-height 设置为 14px 具有相同的效果。
编辑：
看来您可以通过 14px !important 来解决这个问题。以防万一你真的需要使用px.
2016 年 3 月 8 日更新
从 React v15.0 开始，您应该不会再遇到这个问题。根据 changelog:
React DOM: When specifying a unit-less CSS value as a string, a future version will not add px automatically. This version now warns in this case (ex: writing style=. (Unitless number values like width: 300 are unchanged.)
我正在使用 HTML 到 react.js 的 JSX 转换器，在此处演示：
https://magic.reactjs.net/htmltojsx.htm
并注意到一个奇怪的行为。
翻译这段代码时：
<div style="font-size: 14px; line-height: 14px">Hello world</div>
return 短语中的翻译是：
<div style={{ fontSize: 14, lineHeight: 14 }}>Hello world</div>
请注意，“px”被删除了。现在虽然这对“fontSize”功能没问题，但 css 中的“lineHeight”行为完全不同，行高 14 根本不等于 14px。
任何建议的解决方法或解释将不胜感激。
这是一个已知行为，可能是一个错误。但是，MDN 不鼓励对 line-height.
因为您已经为那个元素指定了 font-size（并且因为它正确地解析了它）所以您真的不需要为您的 line-height 使用 px-values，因为然后它将引用元素的 font-size 属性.
The used value is this unitless
numbermultiplied by the element's font size. The computed value is the same as the specifiednumber. In most cases this is the preferred way to set line-height with no unexpected results in case of inheritance.
相反，只需执行：
<div style="font-size:14px; line-height:1">Hello world</div>
这应该与将 line-height 设置为 14px 具有相同的效果。
编辑：
看来您可以通过 14px !important 来解决这个问题。以防万一你真的需要使用px.
2016 年 3 月 8 日更新
从 React v15.0 开始，您应该不会再遇到这个问题。根据 changelog:
React DOM: When specifying a unit-less CSS value as a string, a future version will not add px automatically. This version now warns in this case (ex: writing style=. (Unitless number values like width: 300 are unchanged.)