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

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

我的渲染方法：

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

render（）{
变量divStyle={
背景：“#92f442”，
gridRowStart:1，
zIndex:2
};
返回(
)};

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

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

更重要的是，我试着使用React doc的attibutes 不幸的是，并非所有属性都可见：

渲染属性：

• columnCount、fillOpacity、flex、stopOpacity、strokeDashoffset、strokeOpacity、strokeWidth、tabSize、widows、zIndex、缩放、线宽、不透明度、columnCount、fillOpacity、flex、animationIterationCount

未呈现：

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

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

。例如，

{paddingLeft:10}

变成

{paddingLeft:'10px'}

它有一个新的名字。此列表上的属性被视为普通数字

gridRowStart

不在此列表中，因此React将值转换为

{gridRowStart:1px}

。这不是一个属性，因此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>

const Test=（）=>{
变量divStyle={
背景颜色：“黄色”，
网格：1
};
返回反应；
}
//呈现：
//反应

注意：您需要在Chrome的

about://flags

使用网格布局

---

这里的问题是，您使用这些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>

你好{this.props.name}

---

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

您使用的浏览器是什么？我使用的是带有lineClamp的Google chromeHaving问题。这是正确答案，重新阅读了

网格行开始

规范后，我被Chrome接受

1

作为有效值愚弄了。谢谢你的回答，你节省了我很多时间：）