ReactJS return 条件判断的几种形式
来源:互联网 发布:高达模型淘宝店 编辑:程序博客网 时间:2024/05/17 08:10
原文地址:http://blog.csdn.net/yf275908654/article/details/51078215
在React中,一个组件的HTML标签与生成这些标签的代码内在地紧密联系在一起。这意味着你可以轻松的利用JavaScript强大的魔力,比如循环和条件判断等。
想要在组件中添加条件判断,似乎是件比较困难的事情,因为if/else逻辑很难用HTML标签来表达。直接在JSX中加入if语句会渲染出无效的javascript:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
解决的办法有以下几种:
- 使用三目运算符
- 设置一个变量,并在属性中引用它
- 讲逻辑信息封装到函数中
- 使用 && 运算符
- 三目运算符
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
虽然以上的三目运算符可以正常运行,但如果你想要在其他情况下很好的应用react Component时,可能就显得笨重又麻烦了,所以此方法是不做推荐使用的。
- 使用变量
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
其实就是将条件判断单独的抽离出去,在render中使用函数调用的形式来获取条件结果。
- 使用函数
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
有种然并卵的赶脚
- 使用逻辑与(&&)运算符
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
由于对于null 或 false 值,React不会输出任何内容,因此可以使用一个后面跟随了期望字符串的boolean值来实现条件判断。
如果这个boolean值为true,那么后续的字符串会被使用,反之,则不会被使用
阅读全文
0 0
- ReactJS return 条件判断的几种形式
- ReactJS学习笔记(四)-条件判断的几种形式
- IOS 条件判断的几种形式
- shell 条件判断的几种方式!
- ORALCE的几种IF条件判断语句
- Python 条件判断(if)的几种格式
- reactJS的return里面不要有分号
- DDOS 的几种形式
- 封装的几种形式
- 数据传输的几种形式
- ListView的几种形式
- ListView的几种形式
- pooling的几种形式
- 几种编码的形式的介绍
- 几种编码的形式的介绍
- Singleton模式的几种形式
- JSON的几种调用形式
- C#数据类型转换的几种形式
- springmvc注解
- 支持向量机(SVM)算法
- Codis源码解析——fe的启动
- 匹配字符串
- RedHat6.5如何被windows系统远程桌面连接
- ReactJS return 条件判断的几种形式
- pygame之字体
- springMVC无法接收date类型数据的全局处理方
- linux查看目录下所有文件内容中是否包含某个字符串
- 那些年,Github上的干货!
- 【Linux】文件查找——which、whereis、locate、find...
- PHP表单TOKEN防止重复提交
- 循环_do...while_主要用于人机交互
- 下拉刷新新库