# 组件样式管理 组件的样式该如何书写？组件样式的私有化？ ## React组件样式行内式 我们按照html的书写方式，书写如下代码 ~~~ render() { return ( <Fragment> <div style="background:pink;" className="title">评论组件标题</div> <ul> {this.renderList()} </ul> </Fragment> ) } ~~~ 会报错如下所示： ``` react-dom.development.js:17117 The above error occurred in the <div> component: react-dom.development.js:55 Uncaught Invariant Violation: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. ``` 这里所说的问题是不可以在style属性的值上书写字符串。它期望的是一个对象。 我们做如下修改： ~~~ render() { return ( <Fragment> <div style={{background:'red',textAlign:'center'}} className="title">评论组件标题</div> <ul> {this.renderList()} </ul> </Fragment> ) } ~~~ 在style属性上，我们第一个大括号是JS语法符号。内部的大括号则是js对象。 <iframe width="100%" height="300" src="//jsrun.net/UHyKp/embedded/all/light" allowfullscreen="allowfullscreen" frameborder="0"></iframe> ## 行内式的另一种写法 我们可以将样式写在外面，这样的好处是当前组件中如果用到同样的样式。我们可以复用。 ~~~ render() { var style = {background:'red',textAlign:'center'}; return ( <Fragment> <div style={style} className="title">评论组件标题</div> <ul style={style}> {this.renderList()} </ul> </Fragment> ) } ~~~ <iframe width="100%" height="300" src="//jsrun.net/9HyKp/embedded/all/light" allowfullscreen="allowfullscreen" frameborder="0"></iframe> ## 总结 1.在这里面我们对组件样式管理已经了解了一下。其实这样已经可以达到组件样式的封闭性（只能在当前组件中生效）。 2.思考题：我们对样式这样管理是达到了封闭性，如果希望样式全局生效如何管理呢？