React通過(guò)classnames庫(kù)添加類(lèi)的方法
React添加Class的方式
在vue中添加class是一件非常簡(jiǎn)單的事情:
你可以通過(guò)傳入一個(gè)對(duì)象, 通過(guò)布爾值決定是否添加類(lèi):
<button :class="{ active: isFlag, aaa: true}">按鈕</button>你也可以傳入一個(gè)數(shù)組:
<!-- 1.基本使用 --> <h2 :class="['aaa', 'bbb']">Hello Vue</h2> <!-- 2.數(shù)組中存放變量 --> <h2 :class="[className1, className2]">Hello Vue</h2>
甚至是對(duì)象和數(shù)組混合使用:
<!-- 數(shù)組中放一個(gè)對(duì)象語(yǔ)法 -->
<h2 :class="['aaa', { active: isFlag }]">Hello Vue </h2>而在React中就相對(duì)繁瑣了, React在JSX給了我們開(kāi)發(fā)者足夠多的靈活性，你可以像編寫(xiě)JavaScript代碼一樣，通過(guò)一些邏輯來(lái)決定是否添加某些class:
例如用三元運(yùn)算符判斷是否添加類(lèi)
<h2 className={`'title' ${isActive ? 'active' : ''}`}>我是標(biāo)題</h2>或者將要添加的類(lèi)放在一個(gè)數(shù)組中, 在讓數(shù)組中的元素使用空格連接
<h2 className={['title', (isActive ? 'active' : '')].join(' ')}>我是標(biāo)題</h2>當(dāng)時(shí)如果是簡(jiǎn)單的類(lèi), 判斷一個(gè)類(lèi)是否添加還是比較容易, 如果需要判斷多個(gè), 處理起來(lái)就顯得比較麻煩, 并且代碼的可讀性也會(huì)顯得不友好
這個(gè)時(shí)候我們可以借助于一個(gè)第三方的庫(kù):classnames
很明顯，這是一個(gè)用于動(dòng)態(tài)添加classnames的一個(gè)庫(kù)。
首先需要安裝classnames庫(kù):
npm i classnames
classNames 是一個(gè)函數(shù), 這個(gè)函數(shù)接受任意數(shù)量的參數(shù)，可以是字符串或?qū)ο?/strong>
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'
示例代碼
render() {
const { isActive } = this.state
return (
<div>
{/* 傳入兩個(gè)字符串, 表示綁定兩個(gè)class */}
<h2 className={classNames("aaa", "bbb")}>標(biāo)題</h2>
{/* 明確綁定aaa類(lèi), 根據(jù)變量的布爾值決定是否綁定bbb */}
<h2 className={classNames("aaa", {bbb: isActive})}>標(biāo)題</h2>
{/* js是無(wú)法識(shí)別短橫線的, 如果是短橫線連接的類(lèi)名, 需要用引號(hào)包裹 */}
<h2 className={classNames({ "aaa-bbb": isActive })}>標(biāo)題</h2>
{/* 有多個(gè)不確定是否添加的類(lèi)名, 可以使用多個(gè)對(duì)象 */}
<h2 className={classNames({aaa: isActive}, {bbb: isActive})}>標(biāo)題</h2>
{/* 也可以寫(xiě)在一個(gè)對(duì)象中 */}
<h2 className={classNames({aaa: isActive, bbb: isActive})}>標(biāo)題</h2>
{/* 和vue一樣, 也是支持?jǐn)?shù)據(jù)的寫(xiě)法, 以及數(shù)組和對(duì)象的混合寫(xiě)法 */}
<h2 className={classNames(["aaa", "ccc"])}>標(biāo)題</h2>
<h2 className={classNames(["aaa", {bbb: isActive}])}>標(biāo)題</h2>
</div>
)
}
react之中利用第三方庫(kù)添加類(lèi)名classnames
react之中添加動(dòng)態(tài)類(lèi)名沒(méi)有在vue之中那么方便，可以使用第三方庫(kù)進(jìn)行
1、安裝庫(kù)
yarn add classnames
2、使用
原生在react之中添加class方法：
<h2 className={"foo bar active"}>1</h2>
//下面這個(gè)字符串拼接添加類(lèi)名記得" active"前需要一個(gè)空格
<h2 className={'title'+(isActive?" active":"")}>2</h2>
//下面就避免上述的還需要加空格
<h2 className={['title',(isActive?"active":"")].join("")}>3</h2>使用第三方庫(kù)
import classNames from "classnames"
//一次多個(gè)類(lèi)名
<h2 className={classNames("foo","bar","active")}>1</h2>
//根據(jù)變量的真否判斷是否添加類(lèi)名
<h2 className={classNames({"foo":isFoo,"active":isActive},"bar")}>2</h2>
//數(shù)組的形式實(shí)現(xiàn)
<h2 className={classNames(["title",{"active":isActive}])}>3</h2>
到此這篇關(guān)于React通過(guò)classnames庫(kù)添加類(lèi)的文章就介紹到這了,更多相關(guān)React classnames庫(kù)添加類(lèi)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了useCallback和useMemo的正確用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
react中的forwardRef 和memo的區(qū)別解析
forwardRef和memo是React中用于性能優(yōu)化和組件復(fù)用的兩個(gè)高階函數(shù),本文給大家介紹react中的forwardRef 和memo的區(qū)別及適用場(chǎng)景,感興趣的朋友跟隨小編一起看看吧2023-10-10
React項(xiàng)目中hook實(shí)現(xiàn)展示對(duì)話(huà)框功能
Modal(模態(tài)框)是 web 開(kāi)發(fā)中十分常見(jiàn)的組件,即從頁(yè)面中彈出的對(duì)話(huà)框,下面這篇文章主要給大家介紹了關(guān)于React項(xiàng)目中hook實(shí)現(xiàn)展示對(duì)話(huà)框功能的相關(guān)資料,需要的朋友可以參考下2022-05-05
React.memo 和 useMemo 的使用問(wèn)題小結(jié)
隨著代碼的增加，每次的狀態(tài)改變，頁(yè)面進(jìn)行一次 reRender ，這將產(chǎn)生很多不必要的 reRender 不僅浪費(fèi)性能，從而導(dǎo)致頁(yè)面卡頓，這篇文章主要介紹了React.memo 和 useMemo 的使用問(wèn)題小結(jié),需要的朋友可以參考下2022-11-11
React Fiber結(jié)構(gòu)的創(chuàng)建步驟
這篇文章主要介紹了React Fiber結(jié)構(gòu)的創(chuàng)建步驟，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
Vite?+?React從零開(kāi)始搭建一個(gè)開(kāi)源組件庫(kù)
這篇文章主要介紹了Vite?+?React?如何從0到1搭建一個(gè)開(kāi)源組件庫(kù)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
本篇文章主要介紹了ReactNative之FlatList的具體使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
React純前端模擬實(shí)現(xiàn)登錄鑒權(quán)
這篇文章主要為大家詳細(xì)介紹了React純前端模擬實(shí)現(xiàn)登錄鑒權(quán)的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
React實(shí)現(xiàn)點(diǎn)擊切換組件效果
這篇文章主要為大家詳細(xì)介紹了如何基于React實(shí)現(xiàn)點(diǎn)擊切換組件效果，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的小伙伴可以學(xué)習(xí)一下2023-08-08
Immutable 可以給 React 應(yīng)用帶來(lái)數(shù)十倍的提升，也有人說(shuō) Immutable 的引入是近期 JavaScript 中偉大的發(fā)明，因?yàn)橥?React 太火，它的光芒被掩蓋了。這篇文章主要介紹了Immutable及 React 中的實(shí)踐,需要的朋友可以參考下2018-03-03