React项目中className运用及问题解决

目录
  • 抛出问题
  • 解决问题
    • 组件化思想
    • className运用
  • 总结问题

抛出问题

className 大家都用过吧，用它在 react 项目中设置样式。它的用法很简单，除了可以设置一个样式外，react 中也可以使用 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 的灵活用法，并理解好组件化思想。

以上就是React项目中className运用及问题解决的详细内容，更多关于React项目className运用的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 为什么vue中不建议使用空字符串作为className

    目录 比较空字符串''和null 情况1:使用空字符串'' 情况2:使用null 情况3:使用undefined 使用对象的形式绑定class 使用 &&绑定class 案例1:isBold为false 案例2:isBold为null 空class就一定不对吗? 在我们用三元表达式给DOM元素设置class时,使用空字符串,会导致渲染出一个没有值的空class, 为了避免这种情况出现,可以使用null来代替空字符串. <!-- ❌ --> <div :class=&quo

  • React中classnames库使用示例

    目录 classnames的引入 引入 使用 Node.js, Browserify, or webpack: classnames函数的使用 数组的形式 ES6中使用动态类名 结合React一起使用 总结: classnames的引入 从名字上可以看出,这个库是和类名有关的.官方的介绍就是一个简单的支持动态多类名的工具库. 支持使用 npm, Bower, or Yarn 使用 npm安装 npm install classnames 使用 Bower安装 bower install clas

  • javascript通过className来获取元素的简单示例代码

    示例如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=

  • JS封装通过className获取元素的函数示例

    本文实例讲述了JS封装通过className获取元素的函数.分享给大家供大家参考,具体如下: <div id="box"> <div class="star"></div> <div class="star"></div> <div class="app"></div> <p class="star"></

  • js通过classname来获取元素的方法

    原生JS有3种方式来获取元素: getElementById('id') getElementsByName('name') getElementsByTagName('tag') getElementById是获取元素最快的方式,但我们不能给每个HTML元素都加以ID吧,所以我们需要一个很方便的通过className来获取元素 function getElementsByClassName(className,tagName){ var ele=[],all=document.getEleme

  • React通过classnames库添加类的方法

    React添加Class的方式 在vue中添加class是一件非常简单的事情: 你可以通过传入一个对象, 通过布尔值决定是否添加类: <button :class="{ active: isFlag, aaa: true}">按钮</button> 你也可以传入一个数组: <!-- 1.基本使用 --> <h2 :class="['aaa', 'bbb']">Hello Vue</h2> <!-- 2

  • React项目中className运用及问题解决

    目录 抛出问题 解决问题 组件化思想 className运用 总结问题 抛出问题 className 大家都用过吧,用它在 react 项目中设置样式.它的用法很简单,除了可以设置一个样式外,react 中也可以使用 className 引入多个类样式. 这次在写项目的时候,碰到一个非常小但是当时却一直解决不了的问题.后面在复盘的时候将它解决了.问题大致是这样的: 有两个活动页,每个活动页上都有一个活动规则图标来弹出活动规则,活动规则图标距离顶部会有一个值.现在问题就是这个活动规则在这两个活动页

  • react 项目中引入图片的几种方式

    img标签引入图片 因为react其实是通过js的reader函数渲染的页面,所以直接写src="路径"是无法引入图片 我们可以像引入模块一样引入图片 import img from './../../../../asset/img/user.png' 需要用下面的方式引入 <img src={require('../images/picture.png')} alt="标签"/> 背景图片引入 1 第一种就是常规的 新建一个css文件,然后就可以直接写

  • React项目中应用TypeScript的实现

    目录 一.前言 二.使用方式 无状态组件 有状态组件 受控组件 三.总结 一.前言 单独的使用typescript 并不会导致学习成本很高,但是绝大部分前端开发者的项目都是依赖于框架的 例如和vue.react 这些框架结合使用的时候,会有一定的门槛 使用 TypeScript 编写 react 代码,除了需要 typescript 这个库之外,还需要安装@types/react.@types/react-dom npm i @types/react -s npm i @types/react-

  • React项目中fetch实现跨域接收传递session的解决方案

    React项目中fetch实现跨域接收传递session的解决方案

    本次项目使用了react框架,同时使用fetch取代ajax作为获取接口数据的交互方法.本以为过程中应该不会有什么磕绊,没想到遇到了session丢失这个让人甚是苦恼的问题.期间本想换种方法来对接接口,但转念一想如果每次遇到问题都选择逃避,那么以后的编码之路只能越走越窄,所以还是决定坚持下去.好在经过一整天的摸索,总算是成功攻克了这个难关,下面就对这次问题的解决做个总结. 首先,为什么会出现postman接口调试正常而程序里fetch调用却出现session丢失的问题? 回顾fetch本身的特性

  • 如何在React项目中使用AntDesign

    如何在React项目中使用AntDesign

    目录 0.前言 1.AntDesign是什么? 2.AntDesign如何使用? 3.如何具体使用AntDdesign的组件 3-1.如何使用 antd 的Table组件 3-2.如何使用 antd 的Button组件 4.后续 0.前言 我们在后台管理系统React项目开发中会有Table表格.Form表单.List列表.Button按钮等组件,这个时候我们可以使用AntDesign来减少开发中不必要的样式问题. 1.AntDesign是什么? Ant Design 是一个 UI 设计语言,是

  • 在React项目中使用TypeScript详情

    目录 项目目录及ts文件划分 在项目中使用TypeScript具体实践 组件声明 React Hooks使用 useState useRef useCallback useMemo useContext useReducer useImperativeHandle Axios请求/响应定义封装 前言: 本文主要记录我如何在React项目中优雅的使用TypeScript,来提高开发效率及项目的健壮性. 项目目录及ts文件划分 由于我在实际项目中大部分是使用umi来进行开发项目,所以使用umi生成的

  • react组件中过渡动画的问题解决

    目录 一.是什么 二.如何实现 CSSTransition SwitchTransition TransitionGroup 一.是什么 在日常开发中,页面切换时的转场动画是比较基础的一个场景 当一个组件在显示与消失过程中存在过渡动画,可以很好的增加用户的体验 在react中实现过渡动画效果会有很多种选择,如react-transition-group,react-motion,Animated,以及原生的CSS都能完成切换动画 二.如何实现 在react中,react-transition-g

  • 教你如何实现在react项目中嵌入Blazor

    目录 如何实现在react现有项目中嵌入Blazor? 首先流程 如何实现在react现有项目中嵌入Blazor? 目前官方只提供了angular和react俩种示例所以本教程只讲react教程 思路讲解: 首先在现有react项目中我们可能某些组件是在Blazor中完成,但是我们没办法找到怎么在react中轻量级使用blazor组件,可能会有人会使用iframe去加载Blazor项目,但是我不太喜欢这种方式,所以今天问了很多大佬,有大佬说可以直接在react使用Blazor组件的方式,并且找到

  • 详解如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在React项目中使用Redux react-thunk 中间件,作用:支持异步action 目录结构 Tips:与Redux无关的目录已省略 |--src |-- store Redux目录

  • 优雅的在React项目中使用Redux的方法

    或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在React项目中使用Redux react-thunk 中间件,作用:支持异步action |--src |-- store Redux目录 |-- actions.js |-- index.js |-- reducers.js |-

随机推荐