Javascript：大規模なReact-DataGridプロジェクトの一部としてCSSスタイルプロパティを配列

Question

にプッシュすると、CSSプロパティを配列に定義しています。配列経由しかし繰り返しCSSプロパティの多くはそこに書かれていると私はちょうどグループにそれらをアップしたい

let _columns = []; 

let commonStyle = {"width":"200","height":"300"}; 

_columns.push({ 
    style:commonStyle 
}); 

ちょうど直接書き込ま性質持つ、プッシュ：

_columns.push({ 
    width: 200 
}); 

この作品を、または以下のような（単一のプロパティ値を持つ）変数持つ：

let commonWidth = 200; 

_columns.push({ 
    width: commonWidth 
}); 

このことも動作しますが、私は（複数のプロパティ/値を持つ）commonStyle配列を動作させることはできません。私のスタイル構文に何か問題はありますか？単一のプロパティを持つ配列を設定した場合でも、配列は同じです。

let commonStyle = {"width":"200"}; 

スタイルはまだ動作しません...なぜですか？

Answer 1

実際の例では、プロパティが「スタイル」プロパティ名にネストされている最初の例とは異なるオブジェクト構造が作成されています。また、commonStyleは配列ではなく、プロパティを持つオブジェクトになります。

このお試しください：

let commonStyle = {width: 200, height: 300}; 
_columns.push(commonStyle); 

Answer 2

を、複数のコンポーネント間で共有される共通のスタイルだし、それは大規模なプロジェクトだ場合、私は彼らのための.cssや.lessを作成することをお勧めいたします。

.column{ 
    width: 200 
    height: 300 
} 

代わりに、setプロパティclassName = 'column'を使用してください。

一般的なスタイルの種類によっては、コード内にスタイルを埋め込むことで、リファクタリングやスタイルの変更が難しくなります。