日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React中classnames庫使用示例_React

作者：QiShare ? 更新時間： 2022-12-03 編程語言

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是非常方便我們管理動態多類名。為我們的工作真正的提效。

原文鏈接：https://juejin.cn/post/7159132262548635684

欄目分類
最近更新