本文正在参加「金石计划 . 分割6万现金大奖」

抛出问题

className大家都用过吧，用它在react项目中设置款式。它的用法很简略，除了能够设置一个款式外，react中也能够使用className引入多个类款式。

这次在写项目的时分，碰到一个十分小可是其时却一直处理不了的问题。后面在复盘的时分将它处理了。问题大致是这样的：

有两个活动页，每个活动页上都有一个活动规矩图标来弹出活动规矩，活动规矩图标间隔顶部会有一个值。现在问题就是这个活动规矩在这两个活动页间隔顶部的这个值是不相同的，可是我现已将这个活动规矩图标做成了组件，并在这两个活动页里都调用了它，然后导致两个页面的款式会相同。如下图所示：

className 还能这么用，你学会了吗

处理问题

这个问题不算很大，可是归于细节问题。就和我的组长所说的相同，一个项目应该要做到先完结再完美。所以我其时的处理办法是再写一个活动规矩组件，只是将间隔顶部的值做出修正即可。效果确实是到达了，不过在最终复盘代码的时分，组长留意到了这两个组件，并开端询问我为什么这样做。

组长：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的用法有了更进一步的把握，也不得不感叹组件化思维的广泛运用，这儿最大程度地将组件化思维经过className 发挥出来。

因此，希望经过这个问题，来学会className的灵敏用法，并了解好组件化思维。当然假如大家还有更好的处理计划的话，欢迎在谈论区告诉我。