這篇文章帶給大家的內容是關於React-JSX中如何實現Class與Style的動態綁定（附實例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
摘要：操作元素的class 清單和內聯樣式是資料綁定的一個常見需求，頻繁操作dom元素會降低javascript效能，為了實現高效能js，動態綁定class和style是高素養程式設計師的必選。本文以React-JSX語法為基礎，結合其它框架的實作方法，介紹如何實作ClassName 與 Style 的動態綁定。
註：本文實例都已經過驗證，錯誤的請廣大道友批評指正
我們可以傳給className 一個對象，以動態地切換class：
註：使用類似vue、小程式等物件語法是不支援的
錯誤範例：
render(){
return <p className={ 'box-color'：this.state.isError }>hello world</p>
}可以實現的語法如下：
css檔案
.box-color {
color：red;
}js檔案
render(){
return <p className={ this.state.isError && 'box-color' }>hello world</p>
}#css檔案
.box-show {
display: block;
}
.box-hide {
display: none;
}render(){
return <p className={ this.state.isShow ? 'box-show' : 'box-hide' }>hello world</p>
}綁定的資料物件也不必內聯定義在模板裡：可以定義一個函數，類似vue中的computed鉤子函數
js檔案
getIsError() {
return this.state.isError ? 'box-color' : '';
}
render(){
return <p className={ this.getIsError() }>hello world</p>
}註：下面這種物件變數寫法是不支援的，也不會報錯，控制台className顯示為[object object]，無效。
const classObj = {
'box-show': this.state.isShow,
'box-color': this.state.isError
}
render(){
return <p className={ classObj }>hello world</p>
}一般在專案邏輯比較複雜的場景中使用函數綁定方法，使用過多會使得視圖層和邏輯層交雜混亂，難以閱讀和維護，建議使用邏輯運算子和三元運算符方法動態綁定Class。
React-JSX語法不支援className陣列語法，嘗試範例：
css檔案
.box-hide {
display: none;
}
.box-color {
color：red;
}js檔案
this.state = {isShow: false}
render(){
return <p className={ this.state.isShow ? 'box-color' : [ 'box-color', 'box-hide'] }>hello world</p>
}控制台顯示結果（無效，中間多了個逗號）:
<p class="box-color, box-hide">hello world</p>
註：既然不支援陣列語法，你只能將「box-color」中的樣式重複使用到「box-hide 」中，使用三元運算子來表示，這樣無形中增加了css代碼量。
style物件語法比clasName物件更直觀，處理的功能更簡單，邏輯運算子方法和函數綁定方法可以參考className的實現，以下只介紹三元運算子的使用：
類似Vue的vue-if、微信小程式的wx-if指令，可以用style三元運算子動態實作
js檔案
render(){
return <p style={ this.state.isShow ? {display: 'inline-block'} : { display: 'none'} }>hello world</p>
}#React-JSX語法也不支援style陣列語法，嘗試範例：
# js檔案
render(){
return <p style={ this.state.isShow ? {color: 'red'} : [{color: 'red'}, {display: 'inline-block'}] }></p>
}控制台顯示結果（無效）：
<p></p>
總之，為了高品質的完成專案需求，應付越來越複雜的業務場景，那種大量操作dom元素，隨意命名一個樣式變量，然後綁定到class和style的做法是不提倡的。
相關文章推薦：
以上是React-JSX中如何實作Class與Style的動態綁定（附實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
