快捷導(dǎo)航

React項(xiàng)目中className運(yùn)用及問題解決

更新時(shí)間：2022年12月15日 09:18:10 作者：一條會(huì)coding的Shark

這篇文章主要為大家介紹了React項(xiàng)目中className運(yùn)用及問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

拋出問題

className 大家都用過吧，用它在 react 項(xiàng)目中設(shè)置樣式。它的用法很簡(jiǎn)單，除了可以設(shè)置一個(gè)樣式外，react 中也可以使用 className 引入多個(gè)類樣式。

這次在寫項(xiàng)目的時(shí)候，碰到一個(gè)非常小但是當(dāng)時(shí)卻一直解決不了的問題。后面在復(fù)盤的時(shí)候?qū)⑺鉀Q了。問題大致是這樣的：

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

解決問題

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

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

我便簡(jiǎn)單說了一下緣由。

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

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

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

組件化思想

我自己?jiǎn)栕约海杭热灰呀?jīng)寫好了一個(gè)活動(dòng)規(guī)則組件，為什么僅僅因?yàn)橐粋€(gè)樣式值的不同而去新增一個(gè)功能一樣的組件？很顯然，這種方法是最笨的方案。既然是組件，那就應(yīng)該要有復(fù)用性，或者說只需在原有的基礎(chǔ)上稍加改動(dòng)就可達(dá)到效果。

這是樣式的問題，因此要從根本上解決問題。單純地修改 CSS 樣式肯定不行，因?yàn)閮蓚€(gè)頁(yè)面兩個(gè)不同的樣式。

className運(yùn)用

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

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

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

成功頁(yè)組件

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;

活動(dòng)規(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;

活動(dòng)規(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;
}