拋出問題

className 大家都用過吧，用它在 react 項目中設置樣式。它的用法很簡單，除了可以設置一個樣式外，react 中也可以使用 className 引入多個類樣式。

這次在寫項目的時候，碰到一個非常小但是當時卻一直解決不了的問題。后面在復盤的時候將它解決了。問題大致是這樣的：

有兩個活動頁，每個活動頁上都有一個活動規則圖標來彈出活動規則，活動規則圖標距離頂部會有一個值?，F在問題就是這個活動規則在這兩個活動頁距離頂部的這個值是不一樣的，但是我已經將這個活動規則圖標做成了組件，并在這兩個活動頁里都調用了它，從而導致兩個頁面的樣式會相同。如下圖所示：

解決問題

這個問題不算很大，但是屬于細節問題。就和我的組長所說的一樣，一個項目應該要做到先完成再完美。所以我當時的解決方法是再寫一個活動規則組件，只是將距離頂部的值做出修改即可。效果確實是達到了，不過在最后復盤代碼的時候，組長注意到了這兩個組件，并開始詢問我為什么這樣做。

組長：Rule_1 和 Rule_2 這兩個組件是什么意思，我看它們沒有很大的區別呀。

我便簡單說了一下緣由。

組長接著說：你忘了組件是什么嗎？一個 CSS 樣式值不同就大費周章地新增一個組件，這豈不是太浪費了。再去想想其他方案。

通過這一番談話我想起了組件化思想的運用，發現之前解決的這個小問題解決的并不夠好。于是，我就帶著組件化思想又來重新完善它。

我重新寫了一個 demo 代碼，將主要內容和問題在 demo 代碼中體現出來。下面是原版活動規則組件 demo 代碼，之后的代碼都是基于 demo 代碼完成的

import React from "react";
import "./index.css";
const Header = ({ onClick }) => {
  return (
    <>
      <div className="container_hd">
        <div
          className='affix'
          onClick={onClick}
        ></div>
      </div>
    </>
  );
};
export default Header;

組件化思想

我自己問自己：既然已經寫好了一個活動規則組件，為什么僅僅因為一個樣式值的不同而去新增一個功能一樣的組件？很顯然，這種方法是最笨的方案。既然是組件，那就應該要有復用性，或者說只需在原有的基礎上稍加改動就可達到效果。

這是樣式的問題，因此要從根本上解決問題。單純地修改 CSS 樣式肯定不行，因為兩個頁面兩個不同的樣式。

className運用

className 就不用多介紹了，經常能使用，咱們直接來看如何解決問題。在這里我定義了一個 Value 值，用來區分是在哪個頁面的，比如分別有提交頁和成功頁，我在成功頁設置一個 Value 值，，然后將 Value 值傳入到活動規則組件，那么在活動規則組件里只需要判斷 Value 值是否等于成功頁的 Value 值即可。在 className 處做一個三元判斷，如下所示：

className={`affix_${Value === "0" ? "main" : "submit"}`}

相當于如果 Value 等于0的時候類名為affix_main，否則為affix_submit。最后再 css 將樣式完善即可。完整代碼可以參考如下：

• 成功頁組件

import Header from "./components/Header";
const Success = () => {
  const Value = "0";
  return (
    <div style={{ backgroundColor: "purple", width: "375px", height: "670px" }}>
      <Header Value={Value}></Header>
    </div>
  );
};
export default Success;

• 活動規則組件

import React from "react";
import "./index.css";
const Header = ({ onClick, Value }) => {
  return (
    <>
      <div className="container_hd">
        <div
          className={`affix_${Value === "0" ? "main" : "submit"}`}
          onClick={onClick}
        ></div>
      </div>
    </>
  );
};
export default Header;

• 活動規則組件樣式

.container_hd {
  width: 100%;
}
.affix_main {
  position: absolute;
  top: 32px;
  right: -21px;
  z-index: 9;
  width: 84px;
  height: 26px;
  background: url('./assets/rule.png');
  background-size: contain;
  background-repeat: no-repeat;
}
.affix_submit {
  position: absolute;
  top: 12px;
  right: -21px;
  z-index: 9;
  width: 84px;
  height: 26px;
  background: url('./assets/rule.png');
  background-size: contain;
  background-repeat: no-repeat;
}

通過對比效果圖可以看出，兩者的效果確實發生變化。完成之后，我心里在想：為什么當時就沒想出這個簡單易行的方案呢？動態判斷并設置類名，至少比最開始的新增一個組件的方法高級多了。

總結問題

通過這個 className 的靈活使用，讓我對 className 的用法有了更進一步的掌握，也不得不感嘆組件化思想的廣泛運用，這里最大程度地將組件化思想通過className 發揮出來。

因此，希望通過這個問題，來學會 className 的靈活用法，并理解好組件化思想。