向 React 元件新增多個類名

Oluwafisayo Oluwatayo 2023年1月30日 2022年7月18日
  1. 使用 Template Literals 方法將多個 classNames 新增到 React 元件
  2. 使用 classnames 包新增多個 classNames 到 React 元件
  3. 使用 classnames 包和 .map 方法將多個 classNames 新增到 React 元件
  4. まとめ
向 React 元件新增多個類名

React 中的 classNames 執行與 JavaScript 中的類相同的功能。它們被用來代替類,因為 class 是 React 中的保留字。

向一個元件新增多個 classNames 為我們提供了為該元件設定一些條件的空間。一個 className 用於設定樣式;另一個用於設定條件。

當我們建立具有按鈕的網頁時,這是理想的選擇。

此外,我們可能希望為元件新增額外的樣式以在某些情況下覆蓋原始樣式。新增一個額外的 className 可以讓我們順利地做到這一點。

此外,使用多個 className 來設定樣式使 CSS 檔案更易於閱讀、跟蹤和調整,因為單個 className 可能會因過多的樣式而過載。此外,在多個 CSS 類具有相似屬性的情況下,我們應該為相似屬性建立另一個類,以便於更正和附加元件。

讓我們看看將多個 classNames 新增到元件的不同方法。

使用 Template Literals 方法將多個 classNames 新增到 React 元件

模板文字,也稱為模板字串,允許使用者建立和操作用反引號括起來的多個表示式,後跟 $ 符號和花括號。

我們將建立一個按鈕網頁示例,顯示多個 classNames 的效果,同時使用 CSS 樣式。導航到我們專案資料夾的 App.js 檔案並編寫以下程式碼:

程式碼片段 - App.js

import React from "react";
import "./App.css";
export default function App() {
  const [classNames, setClassNames] = React.useState(``);
  const [showRed, setShowRed] = React.useState(false);
  const [showBlue, setShowBlue] = React.useState(false);
  React.useEffect(() => {
    setClassNames(`${showRed ? "red" : ""} ${showBlue ? "blue" : ""}`);
  }, [showRed, showBlue]);
  return (
    <div>
      <button onClick={() => setShowRed(showRed => !showRed)}>
        Toggle Red
      </button>
      <button onClick={() => setShowBlue(showBlue => !showBlue)}>
        Toggle Light Blue
      </button>
      <div className={classNames}>hit me!</div>
    </div>
  );
}

當我們呼叫 setClassNames 函式時,模板文字對於容納 classNames 很方便。這是我們分別設定類 redblue 的地方。

然後我們將在 App.css 檔案中進行一些編碼:

程式碼片段 - App.css

.red {
  color: red;
}.blue {
  background-color: lightblue;
  width: 50px;
}

輸出:

使用模板文字輸出新增多個類名

我們使用 button onClick 事件偵聽器來告訴 React 當任一按鈕被點選時該做什麼。當我們點選其中一個按鈕時,我們可以看到一個 className 被啟用,當我們點選另一個按鈕時,另一個 className 被呼叫,並且顏色發生了變化。

使用 classnames 包新增多個 classNames 到 React 元件

React 被廣泛接受的原因之一是,由於它的依賴包,它具有無限的潛在開發和調整空間。

classnames 包是我們可以用來向元件新增多個 classNames 的另一種方法。與模板文字方法相比,它可以幫助我們編寫更少的程式碼,並且在處理兩個以上的 classNames 時可以更好地應用。

建立專案資料夾後,我們將導航到仍在內部的專案資料夾並安裝 classnames 包:

npm install classnames

然後,我們開始編碼,從 App.js 檔案開始。

我們使用與第一個示例相同的樣式。我們不會在這裡重複 CSS 片段。

程式碼片段 - App.js

import React from "react";
import "./App.css";
const classNames = require("classnames");

export default function App() {
  const [showRed, setShowRed] = React.useState(false);
  const [showBlue, setShowBlue] = React.useState(false); return (
    <div>
      <button onClick={() => setShowRed(showRed => !showRed)}>
        Toggle Red
      </button>
      <button onClick={() => setShowBlue(showBlue => !showBlue)}>
        Toggle Light Blue
      </button>
      <div className={classNames({ red: showRed, blue: showBlue })}>
        hello
      </div>
    </div>
  );
}

輸出:

使用類名包輸出新增多個類名

classnames 包被應用幷包裝在 div 中,我們在其中為每個元件設定 classNames,然後我們使用 onClick 事件偵聽器來更改每個類的狀態。

當我們單擊分配給類的任一按鈕時,我們可以看到每個 className 被開啟/關閉。

使用 classnames 包和 .map 方法將多個 classNames 新增到 React 元件

如果我們想同時對多個類應用相同的樣式,我們可以使用 classnames 包和 .map 方法。 .map 方法是一個 JavaScript 函式,可幫助我們在相似元素之間傳遞函式。

一旦我們建立了專案資料夾,我們將導航到仍在內部的專案資料夾,我們將安裝 classnames 包:

npm install classnames

接下來,我們開始編碼;首先,使用 App.js 檔案:

程式碼片段 - App.js

import React from "react";
import "./App.css";
const classNames = require("classnames");

export default function App() {
  const [showRed, setShowRed] = React.useState(false);
  return (
    <div>
      {["foo", "bar", "baz"].map(buttonType => (
        <button
          className={classNames({ [`btn-${buttonType}`]: showRed })}
          onClick={() => setShowRed(showRed => !showRed)}
        >
          Button {buttonType}
        </button>
      ))}
    </div>
  );
}

在宣告瞭我們的 classNames 之後,.map 函式將所有三個類對映到 buttonType 物件。這將使我們能夠跨多個類傳遞相同的函式。

然後,我們的 App.css 將如下所示:

.btn-foo,
.btn-bar,
.btn-baz {
  color: red;
}

輸出:

使用類名包新增多個類名並對映輸出

我們為所有類分配了相同的顏色,當我們切換任何按鈕時,onClick 事件監聽器啟用了這個 CSS 函式。

まとめ

在 React 中使用多個類允許我們嘗試不同的組合,因此我們有不同的方法來繞過障礙。而且因為它使我們能夠在一個元件中執行多種樣式和條件,編碼更加靈活,我們可以精確地檢測錯誤和錯誤。

Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn

相關文章 - React Component