react之只用classNames避免字符串拼接
之前在react当中使用了字符串拼接的方式来拼接类名的字符串,这种方法不仅不够方便,还会出现很多问题
使用classNames这个工具,可以省去拼接字符串的烦恼,大大提高开发效率
首先,最简单的使用方法
import classNames from "classnames"
classNames('foo', 'bar'); // => 'foo bar'
复杂的使用
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' // 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'
同时还可以和es6的模板字符串使用更加简单
let faStyle = "home";
classNames("fa",`fa-${faStyle}`) // => "fa fa-home"