# 組件樣式管理 組件的樣式該如何書寫？組件樣式的私有化？ ## 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.思考題：我們對樣式這樣管理是達到了封閉性，如果希望樣式全局生效如何管理呢？