项目经验学习——在React的return里面使用switch-case语句_react return里加判断_老Chen先生的博客-CSDN博客
项目经验学习——在React的return里面使用switch-case语句
老Chen先生
于 2021-10-15 15:28:53 发布
1634
收藏
分类专栏：
React
项目经验学习
技能经验拓展
文章标签：
react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MRlaochen/article/details/120740385
版权
React
同时被 3 个专栏收录
18 篇文章
2 订阅
订阅专栏
项目经验学习
3 篇文章
0 订阅
订阅专栏
技能经验拓展
6 篇文章
0 订阅
订阅专栏
今天在写代码的时候碰到一个渲染的问题，就是返回的是个数值型（int），我要用这个值去判断不同的结果。一开始想到 if-else，但是想到没有 switch-case 优雅，所以准备用 switch-case。
情况一：
但是如果直接在return里面写 switch-case ，可能会发生报错
情况二：
如果用箭头函数 ()=>{} 包裹，这样并不会报错，但是会导致不渲染，因为外面被包了一层 所以按照常理，直接在return里面写 switch-case 并不是一个明智的选择，即使没有报错，写成功了，也不看起来很乱，不简洁。
情况三：
所以可以用一个函数来代替，在这个函数里面写 switch-case 这样return里面就少了很多判断的代码，看起来也很美观，我们只用在这个函数里面进行 switch-case 判断就行。
老Chen先生
关注
关注
点赞
收藏
觉得还不错?
一键收藏
打赏
知道了
评论
项目经验学习——在React的return里面使用switch-case语句
打发打发发
复制链接
扫一扫
专栏目录
React技巧之组件中返回多个元素
weixin_43369143的博客
06-22
164
React技巧之组件中返回多个元素
react-native-switch-fab:Paraboly 用于 React Native 的动画和完全可定制的开关浮动操作按钮
08-04
安装
添加依赖：
npm i @paraboly / react - native - switch - fab
对等依赖
重要的！ 你需要安装它们
"react" : ">= 16.x.x" ,
"react-native" : ">= 0.55.x" ,
"react-native-androw" : ">= 0.0.34" ,
"react-native-dynamic-vector-icons" : ">= 0.2.1" ,
"react-native-material-ripple" : ">= 0.9.1" ,
"react-native-vector-icons" : ">= 6.6.0"
用法
进口
import SwitchFab from "@paraboly/react-native-switch-fab" ;
用法
基本用法
< SwitchFab /
1 条评论
您还未登录，请先
登录
后发表或查看评论
超级进化吧switch case in java
最新发布
洪晓鸿
04-01
792
Switch case语句在Java中是一种流程控制结构，用于将一个值与一系列可能的情况进行比较，并根据匹配的情况执行相应的代码块。在不同的Java版本中，switch case标签的用法略有不同。Java中的switch case语句可以用于多个分支条件的判断，同时也可以用于类型检查和类型转换。在不同的Java版本中，switch case语句的用法也有所不同：Java 6及以下版本：在Java 6及以下版本中，switch case语句只能用于整数类型的判断，不能用于字符串类型和其他数据类型的判断...
react-app-rewire-babel-loader：使用react-app-rewired在您的create-react-app项目中重新连接babel-loader加载器
01-31
react-app-rewire-babel-loader
使用在您的项目中 loader。
假设您在npm上找到了一个很棒的库，想要在未弹出的项目中使用它，但是不幸的是，它在ES6 +中发布（因为node_modules不会通过babel-loader进行传递），所以您不能真正使用它。
但是，通过和该库react-app-rewire-babel-loader ，您可以使用发现的超棒库。
用法请参见下文。
:police_car_light: 对于react-app-rewired v2.x.x +，未维护
我不维护该库用于react-app-rewired rewired v2.x.x +。
相反，请考虑使用： :
以下内容实质上是模拟react-app-rewire-babel-loader ，您可以将其复制并粘贴到覆盖配置文件中：
// NOTE as of customize-cra v0.2.11
const { babelInclude , getBabelLoader } = require ( "customize-cra" ) ;
const
time-switch-react-native:react-native 的时间切换开关适用于 Android、iOS 和 web(react-native-web)
07-24
用于本机React的时间开关组件，它适用于 Android、iOS 和 Web (react-native-web)。
内容
安装
如果你使用 npm
使用 npm
npm i time-switch-react-native --save
使用纱线
yarn add time-switch-react-native --save
将其导入到您的项目中
import TimeSwitch from " time-switch-react-native " ;
演示
＃＃ 入门要开始使用， time-switch-react-native导入您的 .js/.ts/.tsx/.jsx 文件。
import TimeSwitch from 'time-switch-react-native'
在组件的 render 方法或任何其他返回视图的方法中，使用 TimeSwitch：
在React 组件中使用Echarts的示例代码
08-28
本篇文章主要介绍了在React 组件中使用Echarts的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ReactJS return 条件判断的几种形式
onegoldensun的博客
07-25
4406
原文地址：http://blog.csdn.net/yf275908654/article/details/51078215
在React中，一个组件的HTML标签与生成这些标签的代码内在地紧密联系在一起。这意味着你可以轻松的利用JavaScript强大的魔力，比如循环和条件判断等。
想要在组件中添加条件判断，似乎是件比较困难的事情，因为if/else逻辑很难用HTML标签来表达。直接
React 项目使用 switch ... case ... 语句
BasicLab官方社区
07-17
915
最近项目中需要使用到switch...case...语句，但不知道在React中怎么使用，特此记录便于日后查阅。
但是不得不说 switch 是个好东西，比 if else 好用的多，但是一定要记住，react是必须要返回的，如果没有 返回null也是可以的，否则一定会报错。
import React from 'react';
import './index.less';
export default class Life extends React...
react中使用switch-case
qq_26896085的博客
11-11
1336
在周期中使用switch-case
switch(num){
case "1":return 'a';
case "2":return 'b';
case "3":return 'c';
default:return 'd';
render中使用switch-case
render: inputMethod => (
<d...
在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中如何使用判断？
weixin_55560445的博客
12-07
1019
if/else逻辑很难用HTML标签来表达。直接在JSX中加入if语句会渲染出无效的JavaScript：
<div className={if(true){ 'isActive' }}> ... </div>
上面的写法是错误的
按照自己使用场景，挑选合适的方法：
使用三目运算符使用函数使用逻辑运算符
1、三目运算符return &l...
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
缓存路由
英文|
使用缓存为Vue中的keep-alive类的react-router 。
如果只想要<KeepAlive> ，请尝试
React v15 +
React-Router v4 +
问题
使用Route ，前进或后退时无法缓存组件，这会导致数据丢失和交互
原因与解决方案
Route不匹配时，组件将被卸载
阅读源代码之后Route ，我们发现使用children撑起一个功能，可以帮助控制呈现行为。
隐藏而不是删除将解决此问题。
安装
npm install react-router-cache-route --save
# or
yarn add react-router-cache-route
用法
用CacheRoute替换Route
用CacheSwitch替换Switch （因为Switch仅保留第一个匹配的状态路由，并卸载其他匹配状态的路由）
impor
react-native-simple-alarm:使用 react-native-push-notification 和 react-native-communityasync-storage React原生 ios 和 android 的闹钟功能
08-05
React原生简单警报
使用和构建的本机 ios 和 android 的闹钟功能。
安装 (React Native >= 0.60.0)
npm install --save react-native-simple-alarm
要么
yarn add react-native-simple-alarm
对于使用cocoapods iOS ，运行：
$ cd ios/ && pod install
安装 (React Native <= 0.59.x)
npm install --save react-native-simple-alarm
要么
yarn add react-native-simple-alarm
使用react-native link将库添加到您的项目中：
请按照安装进行操作。
例子
$ cd example
$ yarn install
如果ios：
react-native-typescript-template:模板使用Redux，Saga，React Navigation响应本机打字稿项目
05-17
React Native TypeScript模板
描述
模板使用Redux，Saga，React Navigation响应本机打字稿项目。
怎么跑
克隆此项目。
在根目录下，运行npm install来安装依赖项。
安卓
运行react-native run-android以在Android设备上运行
的iOS
运行cd ios/ && pod install 。
然后运行react-native run-ios在iOS设备上运行项目或通过Xcode运行。
特征
使用打字稿。
定期将库更新为最新版本。
使用React Navigation进行路由（DrawerNavigator，StackNavigator）。
使用apisauce获取简单的GitHub REST API。
使用Redux模式应用流。
动态图
react-native-switch-pro:适用于Android和iOS的通用开关
04-29
react-native-switch-pro（2.0即将发布）
这是适用于android和iOS的通用开关，它可能是Github上React本机的最佳开关。
预习
特征
几乎完美的React本机开关
在iOS和Android上均具有良好的性能
使用PanResponder添加手势
更多动画可跟随iOS本机性能
支持异步和同步事件
支持双向数据绑定
清晰的代码风格
安装
npm install react-native-switch-pro --save
用法
同步
import Switch from 'react-native-switch-pro'
...
render ( ) {
return (
< View xss=removed>
< Switch onSyncPress = { value
react项目使用react-dnd实现拖拽排序
02-26
react项目使用react-dnd实现拖拽排序
React部分面试题
The_Small_White的博客
01-13
1262
1、render函数中return如果没有使用()会有什么问题
为了代码可读性我们一般会在return后面添加括号这样代码可以折行书写，否则就在return 后面紧跟着语句，不然的话，代码会报错
2、componentWillUpdate可以直接修改state的值吗
在render函数执行前修改state都是可以渲染的（但不能调用this.setState(),否则会死循环）。在component...
ReactJS学习笔记(四)-条件判断的几种形式
热门推荐
S1ow
04-06
1万+
梦想不是挂在嘴边炫耀的空气。
在React中，一个组件的HTML标签与生成这些标签的代码内在地紧密联系在一起。这意味着你可以轻松的利用javascript强大的魔力，比如循环和条件判断等。想要在组件中添加条件判断，似乎是件比较困难的事情，因为if/else逻辑很难用HTML标签来表达。直接在JSX中加入if语句会渲染出无效的JavaScript：var IvanIf = React.createCl
Java中switch……case穿透、死循环以及break、return、continue知识点
m0_71467744的博客
06-20
3106
一、Java中switch……case穿透1.定义：在switch语句中，如果case控制的语句体后面不写break，将出现穿透现象，在不判断下一个case值的情况下，向下运行，直到遇到break，或者整体switch语句结束。2.case后面只能跟常量,不能跟变量.二、Java中的死循环1.格式：
2.使用场景：密码验证
1.使用while死循环，让用户不断的输入数据
2.与密码对比：验证不成功输入密码错误
3.验证成功输出欢迎进入系统，并使用break结束当前整个循环
react中如何使用pdf-lib
03-07
你可以使用pdf-lib库来在React中处理PDF文件。首先，你需要在你的React项目中安装pdf-lib库。然后，你可以使用以下代码来读取一个PDF文件：
import { PDFDocument } from 'pdf-lib';
const url = 'https://example.com/my-pdf-file.pdf';
const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer());
const pdfDoc = await PDFDocument.load(existingPdfBytes);
接下来，你可以使用pdf-lib库提供的各种方法来编辑和处理PDF文件。例如，你可以使用以下代码来添加一个新页面：
const { width, height } = pdfDoc.getPage().getSize();
const page = pdfDoc.addPage([width, height]);
page.drawText('Hello World!', {
x: 5,
y: height / 2 + 300,
size: 50,
});
最后，你可以使用以下代码将PDF文件保存到本地或上传到服务器：
const pdfBytes = await pdfDoc.save();
// 保存到本地
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
saveAs(blob, 'my-edited-pdf-file.pdf');
// 上传到服务器
const formData = new FormData();
formData.append('pdfFile', new Blob([pdfBytes], { type: 'application/pdf' }), 'my-edited-pdf-file.pdf');
const response = await fetch('https://example.com/upload-pdf-file', {
method: 'POST',
body: formData,
});
希望这可以帮助你在React中使用pdf-lib库处理PDF文件。
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
老Chen先生
CSDN认证博客专家
CSDN认证企业博客
码龄3年
暂无认证
68
原创
22万+
周排名
195万+
总排名
12万+
访问
等级
957
积分
98
粉丝
229
获赞
51
评论
455
收藏
私信
关注
热门文章
工具应用——Chrome浏览器 F12控制台中文改成英文
20959
JS学习笔记——new Date()日期格式处理
13970
React学习笔记——Hooks中useStore、useDispatch和useSelector的基础介绍和使用,以及两者替代connect
13734
JS学习笔记——window对象的函数btoa和atob
12808
JS学习笔记——使用window.location得到的各部分参数的含义
6439
分类专栏
前端工程化
考研相关
1篇
Git
4篇
前端面试题
JavaScript
28篇
技能经验拓展
6篇
Webpack
9篇
React
18篇
项目经验学习
3篇
CSS
3篇
计算机知识
5篇
工具应用
3篇
最新评论
JS学习笔记——前端下载普通excel文件和二进制文件的区别
涂知行:
请教下是不是这样子的。后端返回文件地址，前端拿到地址后使用a标签或者window.open下载，这个过程的最后客户端拿的还是文件流吧？比起后端直接不返回地址直接返回文件流，这个过程只不过是间接拿到文件流？
JS学习笔记——前端关于File、Blob、FileReader和ArrayBuffer的相关概念知识
痴长几岁:
很棒！学到了！
React学习笔记——Hooks中useStore、useDispatch和useSelector的基础介绍和使用,以及两者替代connect
Hirams:
必须点个赞, 入门一看就懂,
在这之前,网上搜了好久 不是缺这个就是缺那个.. 完全不知道例子 里用到的 state 哪来的...
Webpack5学习笔记（基础篇七）—— Loader加载器
AsyDong:
请问*.es.js用什么加载器啊
React学习笔记——Hooks中useStore、useDispatch和useSelector的基础介绍和使用,以及两者替代connect
MjsCool:
您好，使用redux-thunk 写的异步action，怎么使用usedispatch调用呢
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
在Mac电脑上同时运行不同版本的chrome浏览器
非全管理类考研介绍
Git拉取远程仓库代码与本地分支代码相关流程
2023年2篇
2022年8篇
2021年53篇
2020年5篇
目录
目录
分类专栏
前端工程化
考研相关
1篇
Git
4篇
前端面试题
JavaScript
28篇
技能经验拓展
6篇
Webpack
9篇
React
18篇
项目经验学习
3篇
CSS
3篇
计算机知识
5篇
工具应用
3篇
目录
评论 1
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
祝福语
请填写红包祝福语或标题
红包数量
红包个数最小为10个
红包总金额
红包金额最低5元
余额支付
当前余额3.43元
前往充值 >
需支付：10.00元
取消
确定
下一步
知道了
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝
规则
hope_wisdom 发出的红包
打赏作者
老Chen先生
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值