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>
);

困扰我的一件事是我在margin，padding和emphasis个对象中重复smallEmphasis和small的属性。由于无法进行级联（AFAIK），是否有一个干净的解决方案，不涉及我复制代码？

谢谢，
Kirupa

Answer 1

如果使用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

Answer 2

它是JavaScript，所以只需使用常规对象扩展技术，如Underscore（如果使用ES5）或Object.assign（如果它可用（使用ES6）或polyfill）。

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

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

2 个答案: