在 React 中使用多個類名

在開發複雜的應用程式時，具有多個類的 HTML 元素並不罕見。如果你熟悉 HTML 和 CSS，你可能熟悉設定多個類的語法。在本文中，我們將研究在 React 中執行此操作的多種不同方法。

React 中的多個類名

大多數 React 開發人員使用 JSX，這是一種用於編寫簡單元件定義的特殊語法。它的語法與 HTML 非常相似，這就是為什麼大多數 React 開發人員都喜歡它的原因。有一些關於設定類的本質區別。

在 HTML 中，你可能習慣於使用 class 屬性設定類。由於 React 元件可以定義為類的例項，因此 Class 是保留字。因此，開發人員必須改用 className 屬性。

在 JSX 中，className 屬性必須設定為等於字串。包含多個類的簡單定義如下所示：

<h1 className="classOne classTwo">Hi! Try edit me</h1>

或者，可以將 className 屬性設定為等於返回字串的 JavaScript 表示式。為確保表示式被正確解釋為 JavaScript 程式碼，你必須將它們放在大括號之間。我們來看一個例子：

const color = "white"
<h1 className={"classOne " + color }>Hi! Try edit me</h1>;

在此示例中，我們新增了一個常規字串和一個包含在變數中的字串值。一旦表示式被評估，我們的 className 屬性將等於 'classOne white' 字串。

我們可以通過將 + 運算子替換為 .concat() 方法來使表示式更具可讀性，該方法將兩個字串合併為一個。

const color="white"    
h1 className={"classOne ".concat(color)}>Hi! Try edit me</h1>

React .join() 方法

此標準 JavaScript 方法可用於將字串值陣列轉換為多個 className 值。由於它是一個 JavaScript 方法，我們需要在 JSX 中將整個表示式放在花括號之間。

預設情況下，組合的字串值將由逗號分隔。但是，要生成有效的 className 值列表，我們需要用一個空格分隔它們。幸運的是，我們可以通過將單個空格字串 ' ' 作為引數傳遞給方法來指定分隔符。下面是一個例子：

class App extends Component {
  render() {
    const arr = ["bold", "primary", "lead"]
    return (<div><p className={arr.join(" ")}>Hi! Try edit me</p></div>)
  }
}

在 playcode 上的 styles.css 檔案中，我們定義了三個類：

.lead {
  font-size: 40px;
}
.bold {
  font-weight: bold;
}
.primary {
  color: white
}

執行大括號內的程式碼後，你可以看到應用了所有三個類。

你還可以檢視原始碼以驗證這些類是否應用於 <p> 元素。

<div id="app">
    <div class="container black">
        <p class="bold primary lead">Hi! Try edit me</p>
    </div>
</div>

React 中的自定義函式

在 ES6 中，我們可以使用陣列解構語法來建立一個優雅的自定義函式，該函式返回一個格式化的字串，我們可以將其用作 className 值。

讓我們看一下程式碼：

class App extends Component {
  render() {
    const classNameGenerator = (...classes)=>{
      return classes.join(" ")
    }
    return (<div className={classNameGenerator("container")}></div>)
  }
}

此函式將其引數視為陣列項，然後使用 .join() 方法返回 className 值的格式化列表。

使用該函式時，你可以根據需要傳遞任意數量的字串值。

React 中的條件 className

有條件地應用 className 值對於根據使用者輸入更改元素的外觀非常有用。例如，如果你的應用程式具有深色和淺色主題，則其背景也應從淺色切換為深色。這是一個程式碼示例：

const lightBackground = !this.state.darkTheme ? "white" : "black"
<div className={classNameGenerator("container") + " " + lightBackground }></div>

lightBackground 變數根據 darkTheme 狀態屬性值分配給兩個字串之一。除了呼叫 classNameGenerator("") 函式，我們還使用+ 運算子來包含變數的條件值。

為了更好地演示，我們的 playcode 應用程式 包含一個按鈕，用於切換 darkTheme 屬性的 boolean 值。