React通過classnames庫添加類的方法
React添加Class的方式
在vue中添加class是一件非常簡單的事情:
你可以通過傳入一個(gè)對象, 通過布爾值決定是否添加類:
<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>
甚至是對象和數(shù)組混合使用:
<!-- 數(shù)組中放一個(gè)對象語法 -->
<h2 :class="['aaa', { active: isFlag }]">Hello Vue </h2>而在React中就相對繁瑣了, React在JSX給了我們開發(fā)者足夠多的靈活性，你可以像編寫JavaScript代碼一樣，通過一些邏輯來決定是否添加某些class:
例如用三元運(yùn)算符判斷是否添加類
<h2 className={`'title' ${isActive ? 'active' : ''}`}>我是標(biāo)題</h2>或者將要添加的類放在一個(gè)數(shù)組中, 在讓數(shù)組中的元素使用空格連接
<h2 className={['title', (isActive ? 'active' : '')].join(' ')}>我是標(biāo)題</h2>當(dāng)時(shí)如果是簡單的類, 判斷一個(gè)類是否添加還是比較容易, 如果需要判斷多個(gè), 處理起來就顯得比較麻煩, 并且代碼的可讀性也會顯得不友好
這個(gè)時(shí)候我們可以借助于一個(gè)第三方的庫:classnames
很明顯，這是一個(gè)用于動態(tài)添加classnames的一個(gè)庫。
首先需要安裝classnames庫:
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類, 根據(jù)變量的布爾值決定是否綁定bbb */}
<h2 className={classNames("aaa", {bbb: isActive})}>標(biāo)題</h2>
{/* js是無法識別短橫線的, 如果是短橫線連接的類名, 需要用引號包裹 */}
<h2 className={classNames({ "aaa-bbb": isActive })}>標(biāo)題</h2>
{/* 有多個(gè)不確定是否添加的類名, 可以使用多個(gè)對象 */}
<h2 className={classNames({aaa: isActive}, {bbb: isActive})}>標(biāo)題</h2>
{/* 也可以寫在一個(gè)對象中 */}
<h2 className={classNames({aaa: isActive, bbb: isActive})}>標(biāo)題</h2>
{/* 和vue一樣, 也是支持?jǐn)?shù)據(jù)的寫法, 以及數(shù)組和對象的混合寫法 */}
<h2 className={classNames(["aaa", "ccc"])}>標(biāo)題</h2>
<h2 className={classNames(["aaa", {bbb: isActive}])}>標(biāo)題</h2>
</div>
)
}
react之中利用第三方庫添加類名classnames
react之中添加動態(tài)類名沒有在vue之中那么方便，可以使用第三方庫進(jìn)行
1、安裝庫
yarn add classnames
2、使用
原生在react之中添加class方法：
<h2 className={"foo bar active"}>1</h2>
//下面這個(gè)字符串拼接添加類名記得" active"前需要一個(gè)空格
<h2 className={'title'+(isActive?" active":"")}>2</h2>
//下面就避免上述的還需要加空格
<h2 className={['title',(isActive?"active":"")].join("")}>3</h2>使用第三方庫
import classNames from "classnames"
//一次多個(gè)類名
<h2 className={classNames("foo","bar","active")}>1</h2>
//根據(jù)變量的真否判斷是否添加類名
<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通過classnames庫添加類的文章就介紹到這了,更多相關(guān)React classnames庫添加類內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
從零開始搭建webpack+react開發(fā)環(huán)境的詳細(xì)步驟
這篇文章主要介紹了從零開始搭建webpack+react開發(fā)環(huán)境的詳細(xì)步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
React中jquery引用的實(shí)現(xiàn)方法
這篇文章主要介紹了React中jquery引用的實(shí)現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了React?SSR?之限流,React SSR 畢竟涉及到了服務(wù)端，有很多服務(wù)端特有的問題需要考慮，而限流就是其中之一，本文會通過一個(gè)簡單的案例來說明，為什么服務(wù)端需要進(jìn)行限流，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了React精髓！一篇全概括小結(jié)(急速)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
現(xiàn)在最熱門的前端框架，毫無疑問是 React 。下面這篇文章主要給大家分享了關(guān)于想用好React的你必須要知道的一些事情，文中介紹的非常詳細(xì)，對大家具有一定參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-07-07
使用 React 和 Threejs 創(chuàng)建一個(gè)VR全景項(xiàng)目的過程詳解
這篇文章主要介紹了使用 React 和 Threejs 創(chuàng)建一個(gè)VR全景項(xiàng)目的過程詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
React純前端模擬實(shí)現(xiàn)登錄鑒權(quán)
這篇文章主要為大家詳細(xì)介紹了React純前端模擬實(shí)現(xiàn)登錄鑒權(quán)的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
React實(shí)現(xiàn)阿里云OSS上傳文件的示例
這篇文章主要介紹了React實(shí)現(xiàn)阿里云OSS上傳文件的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
React + Threejs + Swiper 實(shí)現(xiàn)全景圖效果的完整代碼
全景圖效果非常漂亮給人帶來極好的用戶體驗(yàn)效果，那么基于前端開發(fā)如何實(shí)現(xiàn)這種效果呢，下面小編給大家?guī)砹薘eact + Threejs + Swiper 實(shí)現(xiàn)全景圖效果，感興趣的朋友一起看看吧2021-06-06
使用Ant Design Anchor組件的一個(gè)坑及解決
這篇文章主要介紹了使用Ant Design Anchor組件的一個(gè)坑及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04