Question

我认为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的attibutes https://facebook.github.io/react/tips/style-props-value-px.html 遗憾的是，并非所有属性都可见：

RENDERED ATTRIBUTES：

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

NOT RENDERED：

columnCount，boxFlex，boxFlexGroup，boxOrdinalGroup，flexGrow，flexPositive，flexShrink，flexNegative，flexOrder，fontWeight，lineClamp，order，orphans

其他属性如'example'或'whatever'也被省略。

Answer 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样式是按预期设置的。

Answer 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中启用“实验性网络平台技术”才能使用网格布局。

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

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

2 个答案: