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è)用于動(dòng)態(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之中添加動(dòng)態(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)文章
這篇文章主要為大家介紹了useCallback和useMemo的正確用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
react中的forwardRef 和memo的區(qū)別解析
forwardRef和memo是React中用于性能優(yōu)化和組件復(fù)用的兩個(gè)高階函數(shù),本文給大家介紹react中的forwardRef 和memo的區(qū)別及適用場景,感興趣的朋友跟隨小編一起看看吧2023-10-10
React項(xiàng)目中hook實(shí)現(xiàn)展示對話框功能
Modal(模態(tài)框)是 web 開發(fā)中十分常見的組件,即從頁面中彈出的對話框,下面這篇文章主要給大家介紹了關(guān)于React項(xiàng)目中hook實(shí)現(xiàn)展示對話框功能的相關(guān)資料,需要的朋友可以參考下2022-05-05
React.memo 和 useMemo 的使用問題小結(jié)
隨著代碼的增加，每次的狀態(tài)改變，頁面進(jìn)行一次 reRender ，這將產(chǎn)生很多不必要的 reRender 不僅浪費(fèi)性能，從而導(dǎo)致頁面卡頓，這篇文章主要介紹了React.memo 和 useMemo 的使用問題小結(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?如何從0到1搭建一個(gè)開源組件庫，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
本篇文章主要介紹了ReactNative之FlatList的具體使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
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)點(diǎn)擊切換組件效果
這篇文章主要為大家詳細(xì)介紹了如何基于React實(shí)現(xiàn)點(diǎn)擊切換組件效果，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的小伙伴可以學(xué)習(xí)一下2023-08-08
Immutable 可以給 React 應(yīng)用帶來數(shù)十倍的提升，也有人說 Immutable 的引入是近期 JavaScript 中偉大的發(fā)明，因?yàn)橥?React 太火，它的光芒被掩蓋了。這篇文章主要介紹了Immutable及 React 中的實(shí)踐,需要的朋友可以參考下2018-03-03