React中使用style行内样式

在jsx中，一切都是使用JS来实现，那么为DOM添加行内样式，就不能像HTML页面中class=" "那样了，首先看一种最基本的形式：

return <div style = {{border:'1px dashed #ccc', margin:'10px', padding:'10px', boxShadow:'0 0 10px #ccc'}}>
    <h1 style={{fontSize:'14px'}}>评论人： {props.user}</h1>
    <p style={{fontSize:'12px'}}>评论内容：{props.content}</p>
    </div>   

细心的小伙伴肯定发现了，为什么要用两个花括号呢？这里先埋下伏笔，这种形式虽然很直观，但是要修改每一个样式元素，就需要在DOM节点上直接修改，复用性不强，再来看实现第一层封装的形式：

const itemStyle = {border:'1px dashed #ccc', margin:'10px', padding:'10px', boxShadow:'0 0 10px #ccc'}
const userStyle = {fontSize:'14px'}
const contentStyle = {fontSize:'12px'}
.
.
.
    return <div style = {itemStyle}>
    <h1 style={userStyle}>评论人： {props.user}</h1>
    <p style={contentStyle}>评论内容：{props.content}</p>
    </div>   

到这里就可以解答上面的问题了，因为定义一个JS样式对象需要一堆花括号，然后引用这个对象又需要一堆花括号。第一层封装 将样式对象和结构分离，这种形式可以很好地实现复用性，但是每一个样式对象都是独立的，无论是引用还是修改，查找起来都不是很快捷。再来看第二层封装的实现：

const styles = {
     item:{border:'1px dashed #ccc', margin:'10px', padding:'10px', boxShadow:'0 0 10px #ccc'},
     user : {fontSize:'14px'},
     content : {fontSize:'12px'}
 }
 .
 .
 .
     return <div style = {styles.item}>
    <h1 style={styles.user}>评论人： {props.user}</h1>
    <p style={styles.content}>评论内容：{props.content}</p>
    </div>   

第二层封装将多个样式对象合并为一个大的样式对象，无论是名称引用还是复用性，都到得到了极大地改善，但是那么多代码都在一个文件里，造成了代码冗余，于是产生了第四种形式：
新建一个JS文件：
export default {
item:{border:‘1px dashed #ccc’, margin:‘10px’, padding:‘10px’, boxShadow:‘0 0 10px #ccc’},
user : {fontSize:‘14px’},
content : {fontSize:‘12px’}
}
暴露接口，在主文件中引用：

import styles from '@/components/styles'