首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

要在JSX中有条件地添加类名,需要检查变量是否等于任何数组变量

在JSX中有条件地添加类名,可以使用条件语句来检查变量是否等于任何数组变量,并根据条件结果来动态添加类名。

以下是一个示例代码:

代码语言:txt
复制
import React from 'react';

function MyComponent() {
  const myArray = ['class1', 'class2', 'class3'];
  const myVariable = 'class2';

  return (
    <div className={myArray.includes(myVariable) ? myVariable : ''}>
      {/* JSX content */}
    </div>
  );
}

export default MyComponent;

在上述代码中,我们定义了一个数组myArray,其中包含了多个类名。然后,我们定义了一个变量myVariable,它的值为class2

<div>元素的className属性中,我们使用条件语句来检查myArray是否包含myVariable。如果包含,就将myVariable作为类名添加到元素中;否则,添加一个空字符串作为类名。

这样,根据变量是否等于任何数组变量,我们可以在JSX中有条件地添加类名。

请注意,这只是一个示例代码,实际应用中,你可以根据具体需求进行修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

TypeScript:React、拖拽、实践!

关键的地方是声明文件中有许多用到泛型的地方可能大家理解起来会比较困难。 class Component 这里的就是传入的泛型约束变量。...我们只需要把React组件,看成一个class,他和其他的calss,并没有什么特别的不同了。 函数式组件同理。 5 JSX 普通的ts文件,以.ts作为后缀。...而包含JSX的文件,则以.tsx作为后缀。这些文件通常也被认为是React组件。 若要支持jsx,我们需要在tsconfig.js中,配置jsx的模式。一般都会默认支持。...因此,如果我们在定义组件时,应该将props对应的泛型类型传入,以确保JSX的正确解析。 「子孙类型检查」 从TypeScript 2.3开始,ts引入了 children 类型检查。...name to use } } 「JSX表达式结果类型」 默认JSX表达式结果的类型为any。

2.3K10

Shell 编程语法基础

递归函数 11 常用命令 12 参考资料 Shell 变量 在Shell脚本中,定义变量直接赋值即可,使用变量需要在变量前加美元符号$,注意定义变量变量和等号之间不能有空格。 ...使用变量 使用一个定义过的变量,只要在变量前面加美元符号即可(推荐给所有变量加上花括号,这是一个好的编程习惯),如: !...定义数组的一般形式为: 数组=(值1 值2 ......printf 的转义序列 序列 说明 \a 警告字符,通常为ASCII的BEL字符 \f 换页 \n 换行 \t 水平制表符 \r 回车 Shell test 命令 Shell 中的 test 命令用于检查某个条件是否成立...检查文件属性也是 test 的常见用法,比如检查一个文件类型是不是普通文件,可以使用 -f 选项,检查路径是否是目录可以用 -d 选项: touch test.sh filename="test.sh

2.3K10
  • 关于eslint

    代码检查是一种静态的分析,常用于寻找有问题的模式或者代码,并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查,一般来说编译程序会内置检查工具。...因为没有编译程序,为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。 ESLint 这样的工具可以让程序员在编码的过程中发现问题,而不是在执行的过程中发现问题。...每一个规则都是一个插件并且你可以在运行时添加更多的规则 内置规则和自定义规则共用一套规则 API。 内置的格式化方法和自定义的格式化方法共用一套格式化 API。...ESLint 并不推荐任何编码风格,规则是自由的。 所有内置规则都是泛化的。...强制在 JSX 属性中一致使用双引号或单引号 multiline-ternary 要求或禁止在三元操作数中间换行 new-cap 要求构造函数首字母大写 new-parens 要求调用无参构造函数时有圆括号

    3K20

    Typescript真香秘笈

    如果给变量赋予与其声明类型不兼容的值,就会有报错提示。 例如: Array 数组类型 在typescript中,有两种声明数组类型的方式。...方式一: let arr: Array = [1, 2, 3]; // 声明一个数组类型的变量 方式二: let arr: number[] = [1, 2, 3]; // 声明一个数组类型的变量...设置为any类型后,相当于告诉typescript编译器跳过这个变量检查,因此可以访问、设置这个变量任何属性,或者给这个变量任何值,编译器都不会报错。...const sheep = new Sheep(); sheep.makeSound(); sheep.move(); 实现接口: 可以实现一个接口,从而使得满足这个接口的约束条件。...类型别名有时和接口很像,但是可以作用于原始值,联合类型,元组以及其它任何需要手写的类型。可以将type看做存储类型的特殊类型。

    5.6K20

    30个小知识让你更清楚TypeScript

    TypeScript 中的模块是相关变量、函数、和接口的集合。 你可以将模块视为包含执行任务所需的一切的容器。可以导入模块以轻松在项目之间共享代码。...TypeScript 支持嵌入、类型检查和将 JSX 直接编译为 JavaScript。 20、TypeScript 支持哪些 JSX 模式?...preserve 保持 JSX 完整以用于后续转换。 react不经过 JSX 转换,而是react.createElement作为.js文件扩展发出和输出。...你需要安装 TypeScript 编译器,你可以使用npm. npm install -g typescript tsc 22、 TypeScript 中有哪些范围可用...全局作用域:在任何之外定义,可以在程序中的任何地方使用。 函数/范围:在函数或中定义的变量可以在该范围内的任何地方使用。

    3.6K20

    30道TypeScript 面试问题解析

    TypeScript 中的模块是相关变量、函数、和接口的集合。 你可以将模块视为包含执行任务所需的一切的容器。可以导入模块以轻松在项目之间共享代码。...TypeScript 支持嵌入、类型检查和将 JSX 直接编译为 JavaScript。 20、TypeScript 支持哪些 JSX 模式?...preserve 保持 JSX 完整以用于后续转换。 react不经过 JSX 转换,而是react.createElement作为.js文件扩展发出和输出。...你需要安装 TypeScript 编译器,你可以使用npm. npm install -g typescript tsc 22、 TypeScript 中有哪些范围可用...全局作用域:在任何之外定义,可以在程序中的任何地方使用。 函数/范围:在函数或中定义的变量可以在该范围内的任何地方使用。

    4.4K20

    30个小知识让你更清楚TypeScript

    TypeScript 中的模块是相关变量、函数、和接口的集合。 你可以将模块视为包含执行任务所需的一切的容器。可以导入模块以轻松在项目之间共享代码。...TypeScript 支持嵌入、类型检查和将 JSX 直接编译为 JavaScript。 20、TypeScript 支持哪些 JSX 模式?...preserve 保持 JSX 完整以用于后续转换。 react不经过 JSX 转换,而是react.createElement作为.js文件扩展发出和输出。...你需要安装 TypeScript 编译器,你可以使用npm. npm install -g typescript tsc 22、 TypeScript 中有哪些范围可用...全局作用域:在任何之外定义,可以在程序中的任何地方使用。 函数/范围:在函数或中定义的变量可以在该范围内的任何地方使用。

    4.8K20

    React 入门手册

    你不需要成为 JavaScript 专家,但是我希望你对以下内容有很好的了解: 变量 箭头函数 使用扩展运算符处理对象和数组 对象和数组的解构 模板字符串 回调函数 ES 模块化 如果你对这些概念不熟悉...如果你不能确定你的 npm 版本号,那么执行 npm -v 命令来检查是否需要更新 npm。...//... } 我们可以通过在 JSX 的任意位置添加 {message},来在 JSX 中显示这个变量的值。...我们可以在 { } 中添加任何 Javscript 表达式,但是每对大括号中只能有 一个 表达式,并且这个表达式必须是可正确求值的。 如下所示,这是一个在 JSX 中非常常见的表达式。...为了实现这个目的,我们可以为 useEffect() 传入第二个参数,这个参数是一个数组,它的成员是需要监视的 state 变量

    6.4K10

    如何在受控表单组件上使用 React Hooks

    useState 调用中的空字符串是 firstName 的初始值,可以设置为任何需要的值。 现在我们将它设置为空字符串。 注意,你可以随心所欲为 setFirstName 函数命名。...然而,有一个约定,在我们要修改的状态变量的名称之前附加‘set’。 现在我们知道了如何在函数组件中创建状态变量以及如何更新它。 下面让我们继续解释代码的其余部分。...我们在以前的组件中有一个名为 handleInputChange 的方法,现在有一个匿名函数为我们更新状态。 通过尝试在表单中输入文本来检查一切是否正常工作。...如果没有,那么再看一遍本教程,确保你没有跳过任何说明。 添加你认为合适好看的样式。 图片 详见链接https://codesandbox.io/s/pp3rp9lqzj?...将组件和函数组件并排进行比较,可以清楚看到,函数组件更容易推理,使用更少的代码,而且通常看起来更整洁。

    61220

    React学习笔记(二)—— JSX、组件与生命周期

    它被称为 JSX,是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSXJSX 可以很好描述 UI 应该呈现出它应有交互的本质形式。...React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合,比如,在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI,以及需要在 UI 中展示准备好的数据。...,就用 id 来作为 key 值 如果列表中没有像 id 这种的唯一值,就可以使用 index(下标)来作为 key 值 1.5、JSX条件渲染 目标任务: 能够在JSX中实现条件渲染 作用:根据是否满足条件生成...- className - 动态控制 import '....,表示该组件的 UI 结构;如果不需要渲染任何内容,则返回 null 组件就像 HTML 标签一样可以被渲染到页面中。

    5.6K20

    React 条件渲染最佳实践(7 种方法)

    我们可以在 React 项目中的任何地方使用它。 在 React 中,如果要在 if 或者 else 块内部或 JSX 外部的任何地方执行多行代码,最好使用通用的 if-else 语句。...假设你要在 JSX 中实现嵌套的条件渲染。 return ( {condition_a ?...4.带 switch 的多条件渲染-案例 可以在任何位置使用它来进行多个条件渲染,而只有一个变量可以判断条件。...6.HOC 条件渲染 最佳做法摘要 如果要在渲染组件之前实现或检查某些条件,请使用它。 ~~ 高阶组件(HOC)可用于在 React 中实现条件渲染。...当你要运行某些逻辑或在渲染组件之前进行检查时,可以使用它。 例如,你要在访问某些组件之前检查用户是否已通过身份验证。

    5.8K20

    30分钟摸透iOS中谓词NSPredicate的来龙去脉

    在iOS开发Cocoa框架中,有提供NSPredicate,这个通常也被成为谓词类,其主要的作用是在Cocoa中帮助查询和检索,但是需要注意,实质上谓词并不是提供查询和检索的支持,它是一种描述查询检索条件的方式...需要注意,任何Cocoa对象都可以支持谓词,但是此类需要实现键值编码(key-value-coding)协议。...二、NSPredicate的应用解析     NSPredicate提供创建谓词对象和解析谓词对象的方法,它也是Cocoa中有关谓词的中的基。...有一个小细节需要注意,在进行格式化时,如果使用的是变量则不需要添加引号,解析器会帮助你添加,如果使用到常量,则要用转义字符进行转义,例如: NSPredicate * predicate = [NSPredicate...predicateWithFormat:@"name = %@ && age = \"25\"",name]; 对于属性,如果也需要进行格式化,需要注意不能使用%@符号,这个符号在解析时会被解析器自动添加上引号

    1.4K20

    Eslint使用入门指南

    表达式语句中对最左边的运算数使用取反操作 2 no-obj-calls 不允许把全局对象属性当做函数来调用 2 no-regex-spaces 正则表达式中不允许出现多个连续空格 2 quote-props 对象中的属性是否需要用引号引起来...js关键字和保留字不能作为函数名或者变量 2 no-undef 不允许未声明的变量 2 no-undef-init 不允许初始化变量时给变量赋值undefined 2 no-undefined...0 operator-assignment 赋值运算符的风格 0 padded-blocks 块内行首行尾是否空行 [2, "never"] quote-props 对象字面量中属性加引号 0...Eslint本质只是一个代码检测工具,默认情况下也只能检测js文件,如果我们需要在工程化中加入去兼容其他语法例如[.vue]、[.jsx]等其他格式的文件时就没有办法实现,所以我们需要加入一些插件来实现对非...--fix --ext .js,.jsx,.vue src", } } 过滤自己不需要检测的文件,在某些情况下我们不需要检测某些文件,或者由于某些原因在当前场景下不想去检测某个文件,我们只需要在项目根目录去创建

    2.1K20

    JavaScript单元测试利器Jest+mocha+chai

    同步代码的测试比较简单,直接判断函数的返回值是否符合预期就行了,而异步的函数,就需要测试框架支持回调、promise或其他的方式来判断测试结果的正确性了。...其有如下特性: 可检查包括语句、分支和函数覆盖,以及反向工程的代码行覆盖 模块加载钩子 可随时跟踪代码 命令行工具 可运行带覆盖率检查的 node 单元测试,不需要对测试运行进行协作 可生成 HTML...For循环语句:For(循环变量=初始值; 循环条件; 递增/递减计数器){循环执行代码段}用循环变量的初始值与循环条件相比较来确定是否执行循环。...在循环体中有3种跳转语句:Return==终止函数体的运行,并返回一个值。Break==终止整个循环。Continue==结束当前循环,判断是否执行下次循环。...2.6JavaScript中的数组数组对象是使用单独的变量来存储一系列的值。

    59320

    java开发手册黄山版_码出高效java开发手册pdf

    3) 【推荐】所有的局部变量使用基本数据类型。 说明:POJO类属性没有初值是提醒使用者在需要使用时,必须自己显式进行赋值,任何 NPE问题,或 者入库检查,都由使用者来保证。...5) static 成员变量如果仅在本类使用,必须是 private。 6) 若是static 成员变量,考虑是否为final。 7) 成员方法只供内部调用,必须是 private。...导致下一次循环不相等继续向下执行,导致检查数组不通过,抛出java.util.ConcurrentModificationException 【强制】在 JDK7版本及以上,Comparator实现要满足如下三个条件...【强制】当switch 括号内的变量类型为String并且此变量为外部参数时,必须先进行null 判断。 【强制】在高并发场景中,避免使用”等于”判断作为中断或退出的条件。...说明:任何字段如果为非负数,必须是 unsigned。 注意:POJO中的任何布尔类型的变量,都不要加 is前缀,所以,需要在 设置从 is_xxx 到 Xxx的映射关系。

    1.6K50

    《Java开发手册》

    3) 【推荐】所有的局部变量使用基本数据类型。 说明:POJO类属性没有初值是提醒使用者在需要使用时,必须自己显式进行赋值,任何 NPE问题,或 者入库检查,都由使用者来保证。...5) static 成员变量如果仅在本类使用,必须是 private。 6) 若是static 成员变量,考虑是否为final。 7) 成员方法只供内部调用,必须是 private。...导致下一次循环不相等继续向下执行,导致检查数组不通过,抛出java.util.ConcurrentModificationException 【强制】在 JDK7版本及以上,Comparator实现要满足如下三个条件...(七) 控制语句 【强制】当switch 括号内的变量类型为String并且此变量为外部参数时,必须先进行null 判断。 【强制】在高并发场景中,避免使用”等于”判断作为中断或退出的条件。...说明:任何字段如果为非负数,必须是 unsigned。 注意:POJO中的任何布尔类型的变量,都不要加 is前缀,所以,需要在设置从 isxxx 到 Xxx的映射关系。

    2K10

    TS 常见问题整理(60多个,持续更新ing)

    ,在严格空检查模式下,null 和 undefined 值都不属于任何一个类型,它们只能赋值给自己这种类型或者 any ?...可选链运算符的使用 可选链运算符是一种先检查属性是否存在,再尝试访问该属性的运算符,其符号为 ?. 如果运算符左侧的操作数 ?....通过在 .js 文件顶部添加 // @ts-nocheck 注释,让编译器忽略当前文件的类型检查。...三种 JSX 模式 在 TS 中想要使用 JSX 必须做两件事: 给文件一个 .tsx 扩展 启用 jsx 选项 TS 具有三种 JSX 模式:preserve,react 和 react-native...preserve 模式下: 不会将 JSX 编译成 JS,生成代码中会保留 JSX,以供后续的转换操作使用(比如:Babel)。 另外,输出文件会带有 .jsx 扩展

    15.3K76

    react组件用法深度分析

    因此,JSX 允许我们 HTML 的语法来表示 React 树,浏览器和 React 均不需要识别它,只有编译器才有。我们发送给浏览器的是无 JSX 代码。2....任何有 返回值的 都是可以。你可以在函数中放入任何代码,使它返回一些值,并在大括号内调用该函数。但是,尽量不要在 {} 内进行复杂的逻辑操作。... ); }}ReactDOM.render( , mountNode,);这比有条件使用更容易使用。...与函数组件不同的是,class 组件中的 render 函数不接收任何参数。八、函数与在 React 中使用函数组件是受限的。因为函数组件没有 state 状态。...你不需要手动在中创建实例,你只需要记住它就在 React 的内存中。对于函数组件,React 只使用函数的调用来确定要渲染的 DOM 实例。九、组件的优点术语 "组件" 被许多框架和库使用。

    5.4K20

    react组件深度解读

    因此,JSX 允许我们 HTML 的语法来表示 React 树,浏览器和 React 均不需要识别它,只有编译器才有。我们发送给浏览器的是无 JSX 代码。2....任何有 返回值的 都是可以。你可以在函数中放入任何代码,使它返回一些值,并在大括号内调用该函数。但是,尽量不要在 {} 内进行复杂的逻辑操作。... ); }}ReactDOM.render( , mountNode,);这比有条件使用更容易使用。5....与函数组件不同的是,class 组件中的 render 函数不接收任何参数。八、函数与在 React 中使用函数组件是受限的。因为函数组件没有 state 状态。...你不需要手动在中创建实例,你只需要记住它就在 React 的内存中。对于函数组件,React 只使用函数的调用来确定要渲染的 DOM 实例。九、组件的优点术语 "组件" 被许多框架和库使用。

    5.6K20
    领券