日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

React通過classnames庫(kù)添加類的方法_React

作者：林有酒 ? 更新時(shí)間： 2022-11-17 編程語(yǔ)言

React添加Class的方式

在vue中添加class是一件非常簡(jiǎn)單的事情:

你可以通過傳入一個(gè)對(duì)象, 通過布爾值決定是否添加類:

<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給了我們開發(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í)如果是簡(jiǎn)單的類, 判斷一個(gè)類是否添加還是比較容易, 如果需要判斷多個(gè), 處理起來就顯得比較麻煩, 并且代碼的可讀性也會(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類, 根據(jù)變量的布爾值決定是否綁定bbb */}
      <h2 className={classNames("aaa", {bbb: isActive})}>標(biāo)題</h2>
      {/* js是無法識(shí)別短橫線的, 如果是短橫線連接的類名, 需要用引號(hào)包裹 */}
      <h2 className={classNames({ "aaa-bbb": isActive })}>標(biāo)題</h2>
      {/* 有多個(gè)不確定是否添加的類名, 可以使用多個(gè)對(duì)象 */}
      <h2 className={classNames({aaa: isActive}, {bbb: isActive})}>標(biāo)題</h2>
      {/* 也可以寫在一個(gè)對(duì)象中 */}
      <h2 className={classNames({aaa: isActive, bbb: isActive})}>標(biāo)題</h2>
      {/* 和vue一樣, 也是支持?jǐn)?shù)據(jù)的寫法, 以及數(shù)組和對(duì)象的混合寫法 */}
      <h2 className={classNames(["aaa", "ccc"])}>標(biāo)題</h2>
      <h2 className={classNames(["aaa", {bbb: isActive}])}>標(biāo)題</h2>
    </div>
  )
}

react之中利用第三方庫(kù)添加類名classnames

react之中添加動(dòng)態(tài)類名沒有在vue之中那么方便，可以使用第三方庫(kù)進(jìn)行

1、安裝庫(kù)

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>

使用第三方庫(kù)

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>

原文鏈接：https://blog.csdn.net/m0_71485750/article/details/126723701