react動態渲染class類名(條件渲染)

2021-09-02 00:20:36 字數 662 閱讀 2744

前提:有時候在開發過程中需要動態渲染類名,比如高亮顯示,active狀態等。

下面是react寫法,記錄一下:

0?"logo highlight":"logo"} >

0?"icon-shopping-cart highlight":"icon-shopping-cart"} size="md" type="check-circle-o" />

這段**的目的是當counts大於0的時候新增高亮狀態。

另外scss對於這種active寫法(例項 a標籤的hover狀態和普通標籤active狀態):&表示引用父選擇符:

1)hover寫法

a 

body.firefox &

}

編譯後

a 

a:hover

body.firefox a

2)active狀態

.icon-shopping-cart

}

編譯後

.icon-shopping-cart

.icon-shopping-cart .highlight

react頁面渲染之前 react 渲染順序

工作中要對乙個 做再次更新,可能是渲染後更新或者部分元件渲染之後,對頁面效果做處理 之前對react的理解,僅僅停留在render渲染.這次好好理解了下react的生命週期 1 react元件有三種狀態 mounted 已插入真實的dom updating 正在被渲染 和 unmounted已移除真...

React 列表渲染

第一種 將列表內容拼裝成陣列放置到模板中。第二種 將資料拼裝成陣列的jsx物件。import react from react import reactdom from react dom let arr 小明 小黑 小白 let arrhtml 小明,小黑,小白 class welcome ext...

React渲染過程

1.babel會將jsx轉換為react.createlement表示式 2.react.createelement render 在render函式呼叫時,生成乙個element 虛擬節點 3.眾多element組成虛擬dom 4.reactdomcomponent將眾多element轉化為真實節...