React-JSX中如何實作Class與Style的動態綁定（附實例）

這篇文章帶給大家的內容是關於React-JSX中如何實現Class與Style的動態綁定（附實例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

摘要：操作元素的class 清單和內聯樣式是資料綁定的一個常見需求，頻繁操作dom元素會降低javascript效能，為了實現高效能js，動態綁定class和style是高素養程式設計師的必選。本文以React-JSX語法為基礎，結合其它框架的實作方法，介紹如何實作ClassName 與 Style 的動態綁定。

註：本文實例都已經過驗證，錯誤的請廣大道友批評指正

綁定HTML Class

物件語法

我們可以傳給className 一個對象，以動態地切換class：

註：使用類似vue、小程式等物件語法是不支援的

錯誤範例：

render(){
  return <p className={ &#39;box-color&#39;：this.state.isError }>hello world</p>
}

可以實現的語法如下：

1、使用邏輯運算子

css檔案

.box-color {
  color：red;
}

js檔案

render(){
  return <p className={ this.state.isError && &#39;box-color&#39; }>hello world</p>
}

2、使用三元運算子

#css檔案

.box-show {
  display: block;
}

.box-hide {
  display: none;
}

render(){
  return <p className={ this.state.isShow ? &#39;box-show&#39; : &#39;box-hide&#39; }>hello world</p>
}

3、使用函數

綁定的資料物件也不必內聯定義在模板裡：可以定義一個函數，類似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 ? &#39;box-color&#39; : [ &#39;box-color&#39;, &#39;box-hide&#39;] }>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: &#39;inline-block&#39;} : { display: &#39;none&#39;} }>hello world</p>
}

陣列語法

#React-JSX語法也不支援style陣列語法，嘗試範例：

# js檔案

render(){
  return <p style={ this.state.isShow ? {color: &#39;red&#39;} : [{color: &#39;red&#39;}, {display: &#39;inline-block&#39;}] }></p>
}

控制台顯示結果（無效）：

<p></p>

總之，為了高品質的完成專案需求，應付越來越複雜的業務場景，那種大量操作dom元素，隨意命名一個樣式變量，然後綁定到class和style的做法是不提倡的。

相關文章推薦：

html實作一個簡單的註冊頁面（附程式碼）

link標籤連結CSS和@import加載有什麼區別？

以上是React-JSX中如何實作Class與Style的動態綁定（附實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！