How React adds Class
Adding a class to vue is a very simple matter :
You can decide whether to add a class by passing in an object and a boolean value :
<button :class="{ active: isFlag, aaa: true}">按钮</button>
You can also pass in an array :
<!-- 1.基本使用 -->
<h2 :class="['aaa', 'bbb']">Hello Vue</h2>
<!-- 2.数组中存放变量 -->
<h2 :class="[className1, className2]">Hello Vue</h2>
Even a mix of objects and arrays :
<!-- 数组中放一个对象语法 -->
<h2 :class="['aaa', { active: isFlag }]">Hello Vue </h2>
In React, it is relatively cumbersome. React gives us developers enough flexibility in JSX. You can decide whether to add certain classes through some logic just like writing JavaScript code :
For example, use the ternary operator to determine whether to add a class
<h2 className={
`'title' ${
isActive ? 'active' : ''}`}>我是标题</h2>
Or put the class to be added in an array, and use spaces to connect the elements in the array
<h2 className={['title', (isActive ? 'active' : '')].join(' ')}>我是标题</h2>
At that time, if it was a simple class, it was relatively easy to judge whether a class was added. If you need to judge more than one, it would be troublesome to process, and the readability of the code would also be unfriendly.
At this time, we can use a third-party library: classnames
Obviously, this is a library for dynamically adding classnames.
First you need to install the classnames library:
npm i classnames
classNames is a function that accepts any number of arguments, which can be strings or objects
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'
sample code
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>
)
}