在设置我的 JSX 内容样式时避免重复的样式属性？

Question

我正在使用内联样式方法在 React 中设置一些内容的样式。这是我所拥有的片段：

var textStyles = {
  emphasis: {
    fontSize: 38,
    margin: 0,
    padding: 0,
  },
  smallEmphasis: {
    margin: 0,
    padding: 0
  },
  small: {
    fontSize: 17,
    opacity: 0.5,
    padding: 0,
    margin: 0
  }
}

return(
  <div style={divStyle}>
    <LightningCounter/>
    <h2 style={textStyles.smallEmphasis}>LIGHTNING STRIKES</h2>
    <h2 style={textStyles.emphasis}>WORLDWIDE</h2>
    <p style={textStyles.small}>(since you loaded this example)</p>
  </div>
);

困扰我的一件事是我在 emphasis、smallEmphasis 和 [=15= 中重复 margin 和 padding 的属性] 对象。由于级联是不可能的（AFAIK），是否有一个干净的解决方案不涉及我复制代码？

谢谢，
基茹帕

Answer 1

它是 JavaScript，所以只需将常规对象扩展技术与 Underscore（如果使用 ES5）之类的库一起使用，或者与 Object.assign（如果您可以使用它）（使用 ES6）或 polyfills 一起使用。

var baseStyles = {
    margin: 0,
    padding: 0
},
emph = Object.assign(baseStyles, {
    font-size: 12px
});

Answer 2

如果使用 ES6，这似乎是 spread operator 的候选者：

const baseStyle = {
   margin: 0,
   padding: 0
}

const emphasis {
  ...baseStyle,
  fontSize: 38
}

更好的是，本着 DRY 的精神，如果您发现自己在组件之间重复相同的 baseStyle，可能值得将其分离到另一个文件中，然后再导入该文件任何需要的地方：

styles.js

export default {
   margin: 0,
   padding: 0
}

SomeComponent.jsx

 import style from './styles

在设置我的 JSX 内容样式时避免重复的样式属性？

Avoiding duplicate style properties when styling my JSX content?

reactjs

react-jsx