リアクションインラインスタイルが一部のアトリビュートで動作しない

Question

リアクションパラメータgri​​dRowStartは、zIndexがz-indexに変換されたのと同じように、grid-row-startに変換されると仮定しました。 しかし、それは動作しません、なぜあなたは考えていますか？残念ながら、クロームで、私は要素が唯一の2 attibutes

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

を持っている多くはである何、私は残念ながらリアクトドキュメント https://facebook.github.io/react/tips/style-props-value-px.html からattibutesをいない使用することを試みた

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

：

はrenderメソッドをマイすべての属性が表示されます。

レンダリングされたアトリビュート：

• columnCountの、fillOpacity、フレックス、stopOpacity、strokeDashoffset、strokeOpacity、strokeWidth、tabSize、未亡人、のZIndex、ズーム、lineHeight、不透明度、columnCountの、fillOpacity、フレックス、animationIterationCount

レンダリングされません：

• columnCountの、boxFlex、boxFlexGroup、boxOrdinalGroup、flexGrow、flexPositive、flexShrink、flexNegative、flexOrder、たfontWeight、lineClamp、順序、孤児

「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があり、レンダリングされた要素を調べる場合は、予想されるように、そのグリッド行開始のスタイルが設定されて表示されます。

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で「実験のWebプラットフォーム技術」を有効にする必要があります。

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