拋出問題

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

這次在寫項目的時候，碰到一個非常小但是當時卻一直解決不了的問題。后面在復盤的時候?qū)⑺鉀Q了。問題大致是這樣的：

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

解決問題

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

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

我便簡單說了一下緣由。

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

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

我重新寫了一個 demo 代碼，將主要內(nèi)容和問題在 demo 代碼中體現(xiàn)出來。下面是原版活動規(guī)則組件 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;

組件化思想

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

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

className運用

className 就不用多介紹了，經(jīng)常能使用，咱們直接來看如何解決問題。在這里我定義了一個 Value 值，用來區(qū)分是在哪個頁面的，比如分別有提交頁和成功頁，我在成功頁設置一個 Value 值，，然后將 Value 值傳入到活動規(guī)則組件，那么在活動規(guī)則組件里只需要判斷 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;

• 活動規(guī)則組件

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;

• 活動規(guī)則組件樣式

.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;
}

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

總結(jié)問題

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

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