を上書きするコンポーネントのインラインスタイル速記宣言に反応しますしかし、グリッド・カラムとグリッド・ローのプロパティを使用すると、ブラウザで 'grid-area：2/1/5/3'という略式宣言に短縮され、グリッド・エリア・スタイルが上書きされます。私はループ内でそれを設定している場合は、私がどのように見えるの値オブジェクトを渡さリアクトコンポーネントを持ってお互い
また、これは起こります：
for (let prop in values) {
this.cell.style[prop] = values[prop];
};
はこれを行うには良い方法はありますか？ MDNから
：
grid-row-start、grid-column-start、grid-row-endとgrid-column-endgrid-column-startとgrid-column-endgrid-row-startとgrid-row-endの省略形です。のでgrid-areaはgrid-columnとgrid-rowと相互に排他的です。 リアクションは、これらのCSSプロパティをインテリジェントにマージするようには設計されていません。最後に定義されたものを勝利させるだけです。
ただし、これらのプロパティを自分でマージするロジックを追加することができます
const mergedGridColumn = gridColumn.replace(/[0-9*]/g, value => `${value} ${gridArea}`);
const mergedGridRow = gridRow.replace(/[0-9*]/g, value => `${value} ${gridArea}`);
valuesについて：
{
const values = {
gridArea: 'header',
gridColumn: '1/3',
gridRow: '2/5',
}
これはstyle生成：
{
grid-area: 2 header/1 header/5 header/3 header;
}
全例：
const App =() => {
const values = {
gridArea: 'header',
gridColumn: '1/3',
gridRow: '2/5',
};
return (
<div className="App" style={{display: 'grid'}}>
<Header values={values} />
</div>
);
}
const Header = (props) => {
const { gridArea, gridColumn, gridRow } = props.values;
const mergedGridColumn = gridColumn.replace(/[0-9*]/g, value => `${value} ${gridArea}`);
const mergedGridRow = gridRow.replace(/[0-9*]/g, value => `${value} ${gridArea}`);
return (
<div
className="App-header"
style={{
gridColumn: mergedGridColumn,
gridRow: mergedGridRow,
}}
>
<h2>Welcome to React</h2>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.App {
text-align: center;
}
.App-header {
background-color: orchid;
color: white
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
あなたはgridColumとgridRowからグリッド面積を計算してみましたか？これで解決できるかもしれません。 – lilezek