樣式化我的JSX內容時避免重複的樣式屬性？

我使用內聯樣式方法在React中創建一些內容。這裏是什麼，我有一個片段：樣式化我的JSX內容時避免重複的樣式屬性？

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和small對象爲margin和padding性質的東西。由於級聯是不可能的（AFAIK），是否有一個乾淨的解決方案，不涉及我複製代碼？

感謝，
Kirupa

來源

2016-02-27 Kirupa Chinnathambi

只是好奇你的原因選擇內嵌樣式，據我所知，他們只應作爲最後的手段。除了使用正常的CSS你可以參考這個：https://medium.com/@jviereck/modularise-css-the-react-way-1e817b317b04 –

看來，內聯樣式是「反應方式」的一部分，以確保組件與他們的所有視覺細節在一個地方自成一體。我個人沒有問題使用普通的CSS通過標記我的JSX與className值:-) –

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

來源

2016-02-27 17:29:27 lux

它的JavaScript所以只要使用正規的對象擴展技術，要麼像下劃線庫（如果使用ES5）或Object.assign如果它提供給你（使用ES6）或polyfills。

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

來源

2016-02-27 01:25:00

樣式化我的JSX內容時避免重複的樣式屬性？

回答

相關問題