Javascript：将 CSS 样式属性推入数组答案

【问题标题】：Javascript: pushing CSS style property into arrayJavascript：将 CSS 样式属性推入数组
【发布时间】：2017-03-15 03:16:53
【问题描述】：

作为一个更大的 React-datagrid 项目的一部分，我将 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"};

样式仍然不起作用...为什么？

【问题讨论】：

到底是什么问题？页面上的 CSS 是否未更改，还是 commonStyle“数组”未更新的问题（顺便说一下，可以通过将 let 更改为 var 来解决）
当我刷新页面时，我希望 commonstyle 中的属性生效，但它们没有
我也把 let 改成了 var 但我没看出有什么区别
好吧，那些工作的对象在对象中没有“样式”属性......不应该;它只是_columns.push(commonStyle)
我还有一些其他属性不需要在 commonStyle 中，所以它不会只是 _columns.push(commonStyle)，但我试过了，但没有用。我真的不明白为什么 width:200, 有效但 style:{width:200},

【解决方案1】：

您的工作示例创建的对象结构与第一个示例不同，其中您的属性嵌套在“样式”属性名称中。此外，commonStyle 不会是数组，而是具有属性的对象。

试试这个：

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

【讨论】：

【解决方案2】：

如果是多个组件之间共享的通用样式，并且是一个大型项目，我建议您为它们创建一个 .css 或 .less。

.column{
    width: 200
    height: 300
}

并改用 set property className='column'。

根据您有多少常用样式，在代码中嵌入样式将使重构/重新设置样式变得更加困难，并且通常是一个糟糕的设计。

【讨论】：