在 React 中使用 CLSX 有条件地应用类
本文将解释 clsx() 函数并有条件地在 React 中应用类。
同名包中的 clsx() 函数是一个 JavaScript 实用程序，用于设置设置 className 属性值的条件。它接受无限数量的参数，不限于一种特定类型。
最终，clsx() 函数返回一个 string 插值，检查 JavaScript 变量的 boolean 值并相应地应用类。
当然可以自己编写这些字符串，但它比简单地使用 clsx() 函数要耗时得多。
查看官方 npm 文档。
React 开发人员使用 clsx() 函数来应用类。
我们可以设置应用特定类需要满足的条件，但这不是必需的。
例子：
import "./styles.css";
import clsx from "clsx";
const classNameOne = "redButton";
const classNameTwo = "blueBorder";
export default function App() {
const number = 3;
return (
<div className="App">
<button className={clsx(classNameOne, { [classNameTwo]: number > 5 })}>
A sample button
</button>
</div>
);
}
在上面的示例中，我们有两个具有字符串类型值的变量。我们还有一个变量，称为 number，设置为任意数字，以演示 clsx() 函数如何有条件地应用于（或不应用于）指定的类。
classNameOne 函数的第一个参数没有任何关联的条件，因此无论如何它通常都会被应用。第二个参数是具有 classNameTwo 属性的 key-value 对和条件作为其值的对象。
在这种情况下，number 变量的值为 3，不超过 5，因此 classNameTwo 不适用。尝试更改 CodeSandbox 上的值，看看自己会发生什么。
这是基本条件样式的示例。乍一看，你并不明白为什么需要 clsx() 函数，但是一旦你的样式设置条件变得更加复杂，clsx() 允许你轻松设置这些条件。
相关文章
在 React 中循环遍历对象数组
发布时间：2023/03/18 浏览次数：124 分类：React
-
在 React 中循环对象数组： 使用 map() 方法迭代数组。 我们传递给 map() 的函数会为数组中的每个元素调用。 该方法返回一个新数组，其中包含传入函数的结果。 export default function App (
获取 React 中元素的类名
发布时间：2023/03/18 浏览次数：162 分类：React
-
在 React 中使用 event.target 获取元素的类名 获取元素的类名： 将元素上的 onClick 属性设置为事件处理函数。 访问元素的类名作为 event.currentTarget.className 。 export default function App () { cons
如何将 key 属性添加到 React 片段
发布时间：2023/03/18 浏览次数：152 分类：React
-
使用更详细的片段语法将 key 属性添加到 React 片段，例如 React.Fragment key={key} 。 更冗长的语法实现了相同的结果对元素列表进行分组，而不向 DOM 添加额外的节点。 import React from react
如何在 React 中删除事件监听器
发布时间：2023/03/15 浏览次数：203 分类：React
-
在 React 中删除事件监听器： 在 useEffect 挂钩中添加事件侦听器。 从 useEffect 挂钩返回一个函数。 当组件卸载时，使用 removeEventListener 方法移除事件监听器。 import {useRef, useEffect} from r
React 中在 map() 中使用条件跳出map
发布时间：2023/03/15 浏览次数：198 分类：React
-
React 中在 map() 中使用条件： 在数组上调用 map() 方法。 使用 if 条件，如果条件满足则显式返回。 否则返回不同的值或返回 null 以不呈现任何内容。 export default function App () { const arr =
在 React 中调用多个 onClick 函数
发布时间：2023/03/15 浏览次数：160 分类：React
-
在 React 中调用多个 onClick 函数： 在元素上设置 onClick 属性。 在事件处理函数中调用其他函数。 事件处理函数可以根据需要调用尽可能多的其他函数。 export default function App () { const s
在 React 中按类名查找所有元素
发布时间：2023/03/15 浏览次数：171 分类：React
-
在 React 中通过 className 查找所有元素： 使用 getElementsByClassName 方法获取具有特定类的所有元素。 将对该方法的调用放在 useEffect() 钩子中。 import {useEffect} from react ; const App = () = { useEf
在 React 中检查元素是否获取到焦点
发布时间：2023/03/15 浏览次数：154 分类：React
-
要检查元素是否在 React 中获得焦点： 在元素上设置 ref 属性。 元素呈现后，检查元素是否是文档中的活动元素。 如果是，则该元素被聚焦。 import {useEffect, useRef} from react ; export defaul
在 React 中悬停时显示元素或文本
发布时间：2023/03/13 浏览次数：160 分类：React
-
在 React 中悬停时显示元素或文本： 在元素上设置 onMouseOver 和 onMouseOut 属性。 跟踪用户是否将鼠标悬停在状态变量中的元素上。 根据状态变量有条件地渲染另一个元素。 import {useStat
