拋出問(wèn)題

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

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

有兩個(gè)活動(dòng)頁(yè)，每個(gè)活動(dòng)頁(yè)上都有一個(gè)活動(dòng)規(guī)則圖標(biāo)來(lái)彈出活動(dòng)規(guī)則，活動(dòng)規(guī)則圖標(biāo)距離頂部會(huì)有一個(gè)值?，F(xiàn)在問(wè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ì)相同。如下圖所示：

解決問(wèn)題

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

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

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

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

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

我重新寫(xiě)了一個(gè) demo 代碼，將主要內(nèi)容和問(wèn)題在 demo 代碼中體現(xiàn)出來(lái)。下面是原版活動(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)寫(xiě)好了一個(gè)活動(dòng)規(guī)則組件，為什么僅僅因?yàn)橐粋€(gè)樣式值的不同而去新增一個(gè)功能一樣的組件？很顯然，這種方法是最笨的方案。既然是組件，那就應(yīng)該要有復(fù)用性，或者說(shuō)只需在原有的基礎(chǔ)上稍加改動(dòng)就可達(dá)到效果。

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

className運(yùn)用

className 就不用多介紹了，經(jīng)常能使用，咱們直接來(lái)看如何解決問(wèn)題。在這里我定義了一個(gè) Value 值，用來(lái)區(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;
}

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

總結(jié)問(wèn)題

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

因此，希望通過(guò)這個(gè)問(wèn)題，來(lái)學(xué)會(huì) className 的靈活用法，并理解好組件化思想。

以上就是React項(xiàng)目中className運(yùn)用及問(wèn)題解決的詳細(xì)內(nèi)容，更多關(guān)于React項(xiàng)目className運(yùn)用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論