反应内联样式不适用于某些属性

Posted 2023-02-22

【中文标题】反应内联样式不适用于某些属性

【英文标题】：React inlines style not working with some attributes

【发布时间】：2017-02-25 02:32:31

【问题描述】：

我认为 react 参数 gridRowStart 将被转换为 grid-row-start，就像 zIndex 被转换为 z-index。 但它不起作用，你知道为什么吗？

我的渲染方法：

render() 
var divStyle = 
      background: '#92f442',
      gridRowStart: 1,
      zIndex: 2
;
return (
      <div style=divStyle>
      </div>
);

不幸的是，在 chrome i 中，该元素只有 2 个属性

<div style="background: rgb(146, 244, 66); z-index: 2;"></div>

更重要的是，我尝试使用来自 React doc 的属性 https://facebook.github.io/react/tips/style-props-value-px.html 不幸的是，并非所有属性都是可见的：

渲染属性：

columnCount,fillOpacity, flex, stopOpacity, strokeDashoffset, strokeOpacity, strokeWidth, tabSize, widows, zIndex, zoom, lineHeight, opacity, columnCount, fillOpacity, flex, animationIterationCount

未渲染：

columnCount、boxFlex、boxFlexGroup、boxOrdinalGroup、flexGrow、flexPositive、flexShrink、flexNegative、flexOrder、fontWeight、lineClamp、order、孤儿

其他属性，如“example”或“whatever”属性也被省略。

【问题讨论】：

你用的是什么浏览器？

我正在使用谷歌浏览器

lineClamp 有问题。

【参考方案1】：

这里的问题是您可能以浏览器忽略它们的方式使用这些 CSS 道具。看看这个简单的例子：

<div style= display: 'grid', height: 200, gridTemplate: '200px / repeat(4, 1fr)' >
  <div style= background: 'lime', gridRowStart: 'span 2', zIndex: 2   >Hello this.props.name</div>
  <div style= background: 'yellow' ></div>
  <div style= background: 'blue' ></div>
</div>

https://jsfiddle.net/LsL6yn7k/

它有一个有效的 gridRowStart 集，如果您检查渲染的元素，您会看到 grid-row-start 样式设置为预期。

【讨论】：

这是正确的答案，重新阅读了grid-row-start 规范。我被 Chrome 接受 1 作为有效值所愚弄。

感谢您的回答，您节省了我很多时间:)

【参考方案2】：

反应converts most unitless numeric CSS values into pixels。因此，例如， paddingLeft: 10 变为 paddingLeft: '10px' 。

它有一个list of CSS properties which accept numbers but are not in units of "px".。此列表中的属性被视为纯数字。

gridRowStart 不在此列表中，因此 React 将值转换为 gridRowStart: 1px 。那不是valid value，所以不会更新div 的style 属性。

gridRow 在unitless 列表中，所以样式更新正确：

const Test = () => 
  var divStyle = 
    backgroundColor: "yellow",
    gridRow: 1
  ;

  return <div style=divStyle>React</div>;


// renders:
// <div style="background-color: yellow; grid-row: 1 auto;">React</div>

注意：您需要在 Chrome 的about://flags 中启用“Experimental Web Platform Technologies”才能使用网格布局。

https://jsfiddle.net/wysj7jx1/5/