ReactJS return 条件判断的几种形式_react return里加判断_onegoldensun的博客-CSDN博客
ReactJS return 条件判断的几种形式
onegoldensun
于 2017-07-25 15:11:48 发布
4406
收藏
原文地址：http://blog.csdn.net/yf275908654/article/details/51078215
在React中，一个组件的HTML标签与生成这些标签的代码内在地紧密联系在一起。这意味着你可以轻松的利用JavaScript强大的魔力，比如循环和条件判断等。
想要在组件中添加条件判断，似乎是件比较困难的事情，因为if/else逻辑很难用HTML标签来表达。直接在JSX中加入if语句会渲染出无效的javascript：
var IvanIf = React.createClass({
render: function () {
return(
<!--会渲染出无效的js的-->
<div className={if(true){ 'is-complete' }}> ... </div>
);
});
12345678
12345678
解决的办法有以下几种：
使用三目运算符设置一个变量，并在属性中引用它讲逻辑信息封装到函数中使用 && 运算符
三目运算符
var IvanIf = React.createClass({
getInitialState:function () {
return { isComplete:true };
},
render: function () {
return(
<div className={ this.state.isComplete ? 'is-complete' : '' }> Hello Ivan .</div>
);
});
12345678910
12345678910
虽然以上的三目运算符可以正常运行，但如果你想要在其他情况下很好的应用react Component时，可能就显得笨重又麻烦了，所以此方法是不做推荐使用的。
使用变量
var IvanIf = React.createClass({
getInitialState:function () {
return { isComplete:true };
},
getIsComplete:function(){
return this.state.isComplete ? 'is-complete' : '' ;
},
render: function () {
var isComplete = this.getIsComplete();
return(
<div className={ isComplete }> Hello Ivan .</div>
);
});
1234567891011121314
1234567891011121314
其实就是将条件判断单独的抽离出去，在render中使用函数调用的形式来获取条件结果。
使用函数
var IvanIf = React.createClass({
getInitialState:function () {
return { isComplete:false };
},
getIsComplete:function(){
return this.state.isComplete ? 'is-complete' : '' ;
},
render: function () {
return(
<div className={ this.getIsComplete() }> Hello Ivan .</div>
);
});
12345678910111213
12345678910111213
有种然并卵的赶脚
使用逻辑与(&&)运算符
var IvanIf = React.createClass({
getInitialState:function () {
return { isComplete:false };
},
render: function () {
return(
<div className={ this.state.isComplete && 'is-complete' }> Hello Ivan .</div>
);
});
12345678910
12345678910
由于对于null 或 false 值，React不会输出任何内容，因此可以使用一个后面跟随了期望字符串的boolean值来实现条件判断。 如果这个boolean值为true，那么后续的字符串会被使用，反之，则不会被使用
onegoldensun
关注
关注
点赞
收藏
觉得还不错?
一键收藏
知道了
评论
ReactJS return 条件判断的几种形式
原文地址：http://blog.csdn.net/yf275908654/article/details/51078215在React中，一个组件的HTML标签与生成这些标签的代码内在地紧密联系在一起。这意味着你可以轻松的利用JavaScript强大的魔力，比如循环和条件判断等。想要在组件中添加条件判断，似乎是件比较困难的事情，因为if/else逻辑很难用HTML标签来表达。直接
复制链接
扫一扫
react中写动态标签，render方法中如何使用if else 判断
01-07
在render()中循环数据，根据数据不同展示标签不同
import React from 'react';
const quanList=[
id:1,
buy_price:1,//购买券的价格
quan_price:30,//可抵扣价格
quanName:'仅限(学习机)商品使用',
on_time:'2020-11-01',
off_time:'2020-11-30',
isHave:false,
},
编写第一个react应用程序
qq_39142654的博客
05-13
268
编写第一个react应用程序
react开发需要引入多个依赖文件：react.js、react-dom.js，分别又有开发版本和生产版本，create-react-app里已经帮我们把这些东西都安装好了。把通过CRA创建的工程目录下的src目录清空，然后在里面重新创建一个index.js. 写入以下代码:
// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引...
参与评论
您还未登录，请先
登录
后发表或查看评论
React部分面试题
The_Small_White的博客
01-13
1262
1、render函数中return如果没有使用()会有什么问题
为了代码可读性我们一般会在return后面添加括号这样代码可以折行书写，否则就在return 后面紧跟着语句，不然的话，代码会报错
2、componentWillUpdate可以直接修改state的值吗
在render函数执行前修改state都是可以渲染的（但不能调用this.setState(),否则会死循环）。在component...
在React中使用if else 条件判断使用
李增的博客
03-10
8174
在react中用jsx渲染dom的时候经常会遇到if条件判断，然而在jsx中竟是不允许if条件判断的。
下面我总结了几种判断方式：
方式一：自定义函数中使用if...else...
export default class Life extends React.Component{
render() {
let flag = true
let renderMessage
if(flag) {
renderMessage = (<h1>标题1</h1>)
React hooks学习--“useState“
m0_60940984的博客
08-17
609
6.React的比较机制会比较setState的引用,所以当想要改变state时需要改变值的引用才能引发页面更新.(浅拷贝,深拷贝)b. 不同的state被同时修改时,只会引起一次组件更新,一次更新会更新多个state.b. 不同的state被同时修改时,只会引起一次组件更新,一次更新会更新多个state.a. 同一个state被多次修改时组件只会更新一次,以最后一次修改为准.a. 同一个state被多次修改时组件只会更新一次,以最后一次修改为准.以上为自己的学习记录,欢迎各位大佬莅临参观指导~!!....
项目经验学习——在React的return里面使用switch-case语句
MRlaochen的博客
10-15
1634
打发打发发
React技巧之组件中返回多个元素
weixin_43369143的博客
06-22
164
React技巧之组件中返回多个元素
巩固——React中如何使用判断？
weixin_55560445的博客
12-07
1019
if/else逻辑很难用HTML标签来表达。直接在JSX中加入if语句会渲染出无效的JavaScript：
<div className={if(true){ 'isActive' }}> ... </div>
上面的写法是错误的
按照自己使用场景，挑选合适的方法：
使用三目运算符使用函数使用逻辑运算符
1、三目运算符return &l...
ReactJS学习笔记(四)-条件判断的几种形式
热门推荐
S1ow
04-06
1万+
梦想不是挂在嘴边炫耀的空气。
在React中，一个组件的HTML标签与生成这些标签的代码内在地紧密联系在一起。这意味着你可以轻松的利用javascript强大的魔力，比如循环和条件判断等。想要在组件中添加条件判断，似乎是件比较困难的事情，因为if/else逻辑很难用HTML标签来表达。直接在JSX中加入if语句会渲染出无效的JavaScript：var IvanIf = React.createCl
react中的循环遍历，以及判断的写法
weixin_48952990的博客
08-21
1360
react中的循环遍历，以及判断的写法
C# return 返回的几种用法
10-20
C# return 返回的几种用法 return View(); 返回和控制器同名视图 return Content("我是一段文本", "text/html"); return Redirect("http://www.baidu.com/"); 返回URL重定向 还有好多种用法哦，下载了看吧。
python return逻辑判断表达式实现解析
09-18
主要介绍了python return逻辑判断表达式实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Python Django view 两种return的实现方式
12-20
return render(request,'index.html') 返回的页面内容是index.html的内容，但是url不变，还是原网页的url,(比如是login页面的返回方法，跳转后的url还是为login) 一刷新就返回去了 2.使用redirect方法 return ...
Java中return的用法(两种)
09-02
主要介绍了Java中return的用法(两种)的相关资料,需要的朋友可以参考下
五种js判断是否为整数类型方式
01-19
方式一、使用取余运算符判断 任何整数都会被1整除，即余数是0。利用这个规则来判断是否是整数。 function isInteger(obj) { return obj%1 === 0 } isInteger(3) // true isInteger(3.3) // false 以上输出可以...
react中副作用函数(useEffect)详解
DDAD9527的博客
11-12
4950
先简单说一下常见的useEffect使用方式 三种
useEffect(() => {
// 副作用函数的内容
})
每次更新之后都要执行
--------------------
useEffect(() => {
// 副作用函数的内容
}, [])
初始化页面时 只执行第一次
--------------------
useEffect(() => {
// 副作用函数的内容
}, [依赖项]) //依赖项可以有多个
1 初始执行一次 2 每次依赖项的值变化时
React中的条件渲染
Y974066017的博客
03-21
871
方法1.
state={age:18}
//条件渲染 方法1
promtWelcome(){
if(this.state.age>=18){
return(<div>已经18岁</div>)
}else{
return(<alert>未成年</alert>)
render() {
return (
<div>{this
2021-07-19 ReactJs初学，return 循环中出现的问题。
qq_42862798的博客
07-19
477
记录在ReactJs中，return一个map循环时，Modal会渲染多层的问题。一：背景二：所导致的后果三：解决方案四：结束语
一：背景
在React中 return 的是一个map循环时，会 render 多次导致 Modal 对话框渲染多次，导致背景直接变黑的问题。如下图，
二：所导致的后果
如果这时候我们在这个 map 循环中使用了 Modal 对话框的话，会直接导致 Modal 对话框渲染多层，从而导致背景直接变黑的问题。
三：解决方案
因为 React 我也算是个初学者，所以并不能给到很
React return返回值要不要加括号的问题以及扩展
胡聊前端的博客
05-26
2409
在react组件中返回JSX时，我们一般会这样写：
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
如果JSX标签仅有一行，也可以省略括号。像这样
function getGreeting(user) {
if (user) {
return <h1
vue中的渲染函数render中使用条件判断
最新发布
05-01
Vue是一款非常流行的JavaScript框架之一，其渲染函数render是Vue中非常重要的一部分，用于处理如何将组件渲染为虚拟DOM。在render函数中，我们可以使用条件判断语句来根据不同的情况渲染不同的内容。
比如，我们可以使用if/else语句或者三元表达式来实现条件判断。例如，我们可以通过判断props中的值是否为true，来决定是否渲染特定的内容：
```javascript
render(h) {
return h('div', [
this.props.isTrue ? h('p', '这是真的') : h('p', '这是假的')
])
```
另外，我们还可以使用switch/case语句来处理多个不同的情况，例如：
```javascript
function getComponentType(type) {
switch (type) {
case 'text':
return TextComponent
case 'photo':
return PhotoComponent
case 'video':
return VideoComponent
default:
return TextComponent
render(h) {
const Component = getComponentType(this.props.type)
return h(Component, {
props: {
data: this.props.data
})
```
在这个例子中，我们使用switch/case语句来选择不同类型的组件，然后将渲染后的组件返回。这样可以使得组件逻辑更加灵活，根据不同的props渲染不同的内容。
总之，使用条件判断语句来渲染不同的内容是Vue的一个非常重要的功能，在render函数中使用条件判断可以使得组件的逻辑更加灵活，实现更多的功能。但是我们需要注意代码的可读性和维护性，避免嵌套过深和代码过于复杂。
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
onegoldensun
CSDN认证博客专家
CSDN认证企业博客
码龄6年
暂无认证
19
原创
49万+
周排名
146万+
总排名
5万+
访问
等级
756
积分
粉丝
获赞
评论
收藏
私信
关注
热门文章
React return的写法
8000
vue.js显示html代码
6846
leetcode刷题指南
4700
dangerouslySetInnerHTML, 让React正常显示你的html代码和
4458
ReactJS return 条件判断的几种形式
4406
最新评论
React return的写法
綦枫Dasym:
xuexile
Canvas drawImage 宽度和高度失效
想飞de猪OvO:
可以的
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
Promise的队列与setTimeout的队列有何关联？
css浏览器兼容前缀
js异步
2018年4篇
2017年22篇
目录
目录
最新文章
Promise的队列与setTimeout的队列有何关联？
css浏览器兼容前缀
js异步
2018年4篇
2017年22篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额3.43元
前往充值 >
需支付：10.00元
取消
确定
下一步
知道了
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom 发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值