文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

React中classnames库使用示例

2022-11-13 19:00

关注

classnames的引入

从名字上可以看出,这个库是和类名有关的。官方的介绍就是一个简单的支持动态多类名的工具库。

支持使用 npm, Bower, or Yarn

使用 npm安装

npm install classnames

使用 Bower安装

bower install classnames

使用 Yarn安装

yarn add classnames

引入

import classnames from ‘classnames';

使用 Node.js, Browserify, or webpack:

Node.js, Browserify, webpack:

var classNames = require('classnames');
classNames('foo', 'bar'); // => 'foo bar'

classnames函数的使用

classNames 函数接受任意数量的参数,可以是string、boolean、number、array、dictionary等。

type ClassValue = string I number I ClassDictionary I ClassArray I undef inednull I boolean;

参数 'foo' 是 { foo: true } 的缩写。如果与给定键关联的值是false的,则该key值将不会包含在输出中。

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'
// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'
// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

数组的形式

数组可以按照上面的规则,递归展开数组中的每一项:

var arr = ['b', { c: true, d: false }];`
classNames('a', arr); // => 'a b c'

ES6中使用动态类名

let buttonType = 'primary';`
classNames({ [`btn-${buttonType}`]: true });

结合React一起使用

这个包是classSet的官方替代品,她最初是在React.js插件包中提供的。

常见的一个应用场景是根据条件动态设置类名,在React中是会写出如下的代码:

class Button extends React.Component {
// ...
render () {
var btnClass = 'btn';
if (this.state.isPressed) btnClass += ' btn-pressed';
else if (this.state.isHovered) btnClass += ' btn-over';
return <button className={btnClass}>{this.props.label}</button>;
}
}

使用classnames可以通过对象非常方便的写出条件多类名。

var classNames = require('classnames');
class Button extends React.Component {
// ...
render () {
    var btnClass = classNames({
    btn: true,
   'btn-pressed': this.state.isPressed,
   'btn-over': !this.state.isPressed && this.state.isHovered
});
return <button className={btnClass}>{this.props.label}</button>;
}
}

因为可以将对象、数组和字符串参数混合在一起,所以支持可选的 className props 也更简单,因为只有真实的参数才会包含在结果中:

var btnClass = classNames('btn', this.props.className, {
'btn-pressed': this.state.isPressed,
'btn-over': !this.state.isPressed && this.state.isHovered
});

总结:

在React项目中使用classnames是非常方便我们管理动态多类名。为我们的工作真正的提效。

以上就是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推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯