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

學無先后，達者為師

網站首頁 編程語言 正文

React通過classnames庫添加類的方法_React

作者：林有酒 ? 更新時間： 2022-11-17 編程語言

React添加Class的方式

在vue中添加class是一件非常簡單的事情:

你可以通過傳入一個對象, 通過布爾值決定是否添加類:

<button :class="{ active: isFlag, aaa: true}">按鈕</button>

你也可以傳入一個數組:

<!-- 1.基本使用 -->
<h2 :class="['aaa', 'bbb']">Hello Vue</h2>
<!-- 2.數組中存放變量 -->
<h2 :class="[className1, className2]">Hello Vue</h2>

甚至是對象和數組混合使用:

<!-- 數組中放一個對象語法 -->
<h2 :class="['aaa', { active: isFlag }]">Hello Vue </h2>

而在React中就相對繁瑣了, React在JSX給了我們開發者足夠多的靈活性，你可以像編寫JavaScript代碼一樣，通過一些邏輯來決定是否添加某些class:

例如用三元運算符判斷是否添加類

<h2 className={`'title' ${isActive ? 'active' : ''}`}>我是標題</h2>

或者將要添加的類放在一個數組中, 在讓數組中的元素使用空格連接

<h2 className={['title', (isActive ? 'active' : '')].join(' ')}>我是標題</h2>

當時如果是簡單的類, 判斷一個類是否添加還是比較容易, 如果需要判斷多個, 處理起來就顯得比較麻煩, 并且代碼的可讀性也會顯得不友好

這個時候我們可以借助于一個第三方的庫:classnames

很明顯，這是一個用于動態添加classnames的一個庫。

首先需要安裝classnames庫: npm i classnames

classNames 是一個函數, 這個函數接受任意數量的參數，可以是字符串或對象

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>
      {/* 傳入兩個字符串, 表示綁定兩個class */}
      <h2 className={classNames("aaa", "bbb")}>標題</h2>
      {/* 明確綁定aaa類, 根據變量的布爾值決定是否綁定bbb */}
      <h2 className={classNames("aaa", {bbb: isActive})}>標題</h2>
      {/* js是無法識別短橫線的, 如果是短橫線連接的類名, 需要用引號包裹 */}
      <h2 className={classNames({ "aaa-bbb": isActive })}>標題</h2>
      {/* 有多個不確定是否添加的類名, 可以使用多個對象 */}
      <h2 className={classNames({aaa: isActive}, {bbb: isActive})}>標題</h2>
      {/* 也可以寫在一個對象中 */}
      <h2 className={classNames({aaa: isActive, bbb: isActive})}>標題</h2>
      {/* 和vue一樣, 也是支持數據的寫法, 以及數組和對象的混合寫法 */}
      <h2 className={classNames(["aaa", "ccc"])}>標題</h2>
      <h2 className={classNames(["aaa", {bbb: isActive}])}>標題</h2>
    </div>
  )
}

react之中利用第三方庫添加類名classnames

react之中添加動態類名沒有在vue之中那么方便，可以使用第三方庫進行

1、安裝庫

yarn add classnames

2、使用

原生在react之中添加class方法：

<h2 className={"foo bar active"}>1</h2>
//下面這個字符串拼接添加類名記得" active"前需要一個空格
<h2 className={'title'+(isActive?" active":"")}>2</h2>
//下面就避免上述的還需要加空格
<h2 className={['title',(isActive?"active":"")].join("")}>3</h2>

使用第三方庫

import classNames from "classnames"
//一次多個類名
<h2 className={classNames("foo","bar","active")}>1</h2>
//根據變量的真否判斷是否添加類名
<h2 className={classNames({"foo":isFoo,"active":isActive},"bar")}>2</h2>
//數組的形式實現
<h2 className={classNames(["title",{"active":isActive}])}>3</h2>

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

欄目分類
最近更新