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>
{/* 传入两个字符串, 表示绑定两个class */}
<h2 className={classNames("aaa", "bbb")}>标题</h2>
{/* 明确绑定aaa类, 根据变量的布尔值决定是否绑定bbb */}
<h2 className={classNames("aaa", {bbb: isActive})}>标题</h2>
{/* js是无法识别短横线的, 如果是短横线连接的类名, 需要用引号包裹 */}
<h2 className={classNames({ "aaa-bbb": isActive })}>标题</h2>
{/* 有多个不确定是否添加的类名, 可以使用多个对象 */}
<h2 className={classNames({aaa: isActive}, {bbb: isActive})}>标题</h2>
{/* 也可以写在一个对象中 */}
<h2 className={classNames({aaa: isActive, bbb: isActive})}>标题</h2>
{/* 和vue一样, 也是支持数据的写法, 以及数组和对象的混合写法 */}
<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库添加类内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！