文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

React通过classnames库添加类的方法

2024-04-02 19:55

关注

React添加Class的方式

在vue中添加class是一件非常简单的事情:

你可以通过传入一个对象, 通过布尔值决定是否添加类:

<button :class="{ active: isFlag, aaa: true}">按钮</button>

你也可以传入一个数组:

<!-- 1.基本使用 -->
<h2 :class="['aaa', 'bbb']">Hello Vue</h2>
<!-- 2.数组中存放变量 -->
<h2 :class="[className1, className2]">Hello Vue</h2>

甚至是对象和数组混合使用:

<!-- 数组中放一个对象语法 -->
<h2 :class="['aaa', { active: isFlag }]">Hello Vue </h2>

而在React中就相对繁琐了, React在JSX给了我们开发者足够多的灵活性,你可以像编写JavaScript代码一样,通过一些逻辑来决定是否添加某些class:

例如用三元运算符判断是否添加类

<h2 className={`'title' ${isActive ? 'active' : ''}`}>我是</h2>

或者将要添加的类放在一个数组中, 在让数组中的元素使用空格连接

<h2 className={['title', (isActive ? 'active' : '')].join(' ')}>我是</h2>

当时如果是简单的类, 判断一个类是否添加还是比较容易, 如果需要判断多个, 处理起来就显得比较麻烦, 并且代码的可读性也会显得不友好

这个时候我们可以借助于一个第三方的库:classnames

很明显,这是一个用于动态添加classnames的一个库。

首先需要安装classnames库: npm i classnames

classNames 是一个函数, 这个函数接受任意数量的参数,可以是字符串或对象

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

示例代码

render() {
  const { isActive } = this.state

  return (
    <div>
      {}
      <h2 className={classNames("aaa", "bbb")}></h2>
      {}
      <h2 className={classNames("aaa", {bbb: isActive})}></h2>
      {}
      <h2 className={classNames({ "aaa-bbb": isActive })}></h2>
      {}
      <h2 className={classNames({aaa: isActive}, {bbb: isActive})}></h2>
      {}
      <h2 className={classNames({aaa: isActive, bbb: isActive})}></h2>
      {}
      <h2 className={classNames(["aaa", "ccc"])}></h2>
      <h2 className={classNames(["aaa", {bbb: isActive}])}></h2>
    </div>
  )
}

react之中利用第三方库添加类名classnames

react之中添加动态类名没有在vue之中那么方便,可以使用第三方库进行

1、安装库

yarn add classnames

2、使用

原生在react之中添加class方法:

<h2 className={"foo bar active"}>1</h2>
//下面这个字符串拼接添加类名记得" active"前需要一个空格
<h2 className={'title'+(isActive?" active":"")}>2</h2>
//下面就避免上述的还需要加空格
<h2 className={['title',(isActive?"active":"")].join("")}>3</h2>

使用第三方库

import classNames from "classnames"
//一次多个类名
<h2 className={classNames("foo","bar","active")}>1</h2>
//根据变量的真否判断是否添加类名
<h2 className={classNames({"foo":isFoo,"active":isActive},"bar")}>2</h2>
//数组的形式实现
<h2 className={classNames(["title",{"active":isActive}])}>3</h2>

到此这篇关于React通过classnames库添加类的文章就介绍到这了,更多相关React classnames库添加类内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯