React.js--14在组件中使用style行内样式（3种封装）

以下代码都在CmtItem.jsx文件中
1.样式的第一层封装,将样式对象和结构分离：

const itemStyle =
{
    border: '1px dashed #ccc',
    margin: '10px',
    padding: '10px',
    boxShadow: '0 0 10px #ccc'
}
const userStyle =
{
    fontSize: '15px'
}
const conentStyle =
{
    fontSize: '13px'
}
//使用function构造函数，定义普通的无状态组件
export default function CmtItem(props) {
    return <div style={itemStyle} >
        <h1 style={userStyle}>评论人:{props.user}</h1>
        <p style={contentStyle}>评论内容:{props.conent}</p>
    </div>
}

2.第二层封装，将所有的样式合并成一个大的模块

const style =
{
    item:{border: '1px dashed #ccc',
    margin: '10px',
    padding: '10px',
    boxShadow: '0 0 10px #ccc'
     },
    user: { fontSize: '15px' },
    content:{  fontSize: '13px'}
}
export default function CmtItem(props) {
    return &