React之JSX里render中return方法添加括号()或者[]

IT 哈

于 2023-04-22 09:26:49 发布

阅读量1k

点赞数 1

文章标签： react.js javascript 前端

原文链接：https://www.cnblogs.com/fightjianxian/p/12350083.html

版权

案例如下：

结果：

问题：

react构建component的render方法中return后面为什么要加括号?

分析：

（1）官方说法

return 后面带着一个圆括号,只是为了换行显示，也可以是中括号[]
更符号原生编码习惯的的思维,并且在一些IDE,例如webstrome中编写时html标签自动对齐方式更好看。

（2）验证

　　1、首先我们去掉()，测试下

　　测试后发现渲染解析不出来

　　2、改为[]

　　测试后发现正常解析

　　3、将代码写到return后，改为一行

　　此时也可以正常解析渲染，但不太符号原生编码习惯的的思维

（3）小结

1、圆括号的作用是分割作用域和执行，在render中是给babel-jsx解析用的，这样写更符号原生编码习惯的的思维，也方便解析
2、return的圆括号是为了代码换行，不用括号的话只能写一行

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

IT 哈

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

[react] render函数中return如果没有使用()会有什么问题？

歌谣的博客

11-10

1419

[react] render函数中return如果没有使用()会有什么问题？我们在使用JSX语法书写react代码时，babel会将JSX语法编译成js，同时会在每行自动添加分号（；），如果return后换行了，那么就会变成 return；一般情况下会报错： Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. 上面

React中的JSX

酷爱前端的小陈博客

06-08

1216

JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML（HTML）格式的代码。优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率JSX 是 React 的核心内容。 1. JSX 不是标准的 ECMAScript 语法，它是 ECMAScript 的语法扩展。 2. 需要使用 babel 编译处理后，才能在浏览器环境中使用。 3.create-react-app 脚手架中已经默认有该配置，无需手动配置。

参与评论您还未登录，请先登录后发表或查看评论

render方法括号的作用

weixin_33725239的博客

12-10

759

在学习过程中,发现一个小问题,因为小很少人关注讨论过这个问题, react构建component的render方法中return后面为什么要加括号?下面尝试给出些解释。首先('<p></p>'),(1,2)这些都是原生支持的写法,括号中多个合法的表达式都会执行,返回最后一个表达式的值。如下demo示例所示 func...

return后面加括号和不加括号

fang_ze_zhang的博客

08-20

1万+

return后面加括号和不加括号： return是关键字，不是函数，其后面的括号不是必须的，加括号易于阅读代码。

JavaScript基础 - 函数的 return

weixin_44175290的博客

02-24

322

1.函数的 return - 作用 1. 给函数添加一个返回值 2. 打断函数：书写在return后面行的代码不会继续执行 - 函数的返回值 - 在函数以内return关键字确定该函数的结果 - return 数据 - 函数的问题 - fn 和 fn()分别代表什么意思？ - fn 就是一个变量名，存储的是该函数的‘地址’，书写这句代码的时候不会执行函数内的代码 - fn() 表示把 fn 这个函数内的代码从上到下的执行...

return 后面的内容加括号和不加括号有什么区别？

weixin_45242865的博客

11-23

5123

完全没有区别。 return 是关键字，不是函数，因此其后面的括号不是必须的；加括号易于阅读程序代码，有误括号不影响运行结果。

react中的括号()和{}的应用说明

qq_45736175的博客

05-30

2541

在引用antd组件时，return用的就是() 返回js对象时，用的就是{} 还有在model层中返回数据时，用的也是{} 结论：对于为什么要加括号的问题： JavaScript 会自动给行末添加分号。如果 return 后面换行不加括号就会变成return; 对于什么情况加()括号的问题: return( <div>....</div> //HTML代码 ) return( <Component/> //r...

react.js中render的return的坑

weixin_30951389的博客

12-13

3579

demo代码： <scripttype="text/babel"> var HelloComponent=React.createClass({ render:function(){return <h1>Hello World</h1>} }); ReactDOM.render( <HelloComponent/>,document...

React学习之JSX与react事件实例分析

10-15

在React开发中，JSX（JavaScript XML）是一种语法糖，它允许我们在JavaScript中书写类似HTML的代码，而React事件处理则是在JSX中与用户交互的关键部分。本文将深入探讨JSX和React事件的相关知识。 1. JSX表达式： ...

react中 JSX介绍-基本使用

weixin_58207509的博客

11-05

657

JSX是什么 JSX：是 JavaScript XML的缩写。在 JS 代码中书写 XML 结构注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置了 @babel/plugin-transform-react-jsx 包，用来解析该语法。 React用它来创建 UI（HTML）结构 jsx示例 // 导入react和react-dom import React from 'react' import ReactDOM from 'react

react中jsx行内样式（style）的国定写法、jsx双花括号{{}}写法的解释

热门推荐

Easylee的博客

05-19

1万+

共index.js、index.html、TodoList.js这三个文件，主要看TodoList.js中的Input标签的style样式双花括号{{}}的写法，会在下方做全面的解释运行效果： index.js: import React from 'react'; import ReactDOM, { unmountComponentAtNode } from 'react-dom' import TodoList from './TodoList' ReactDOM.render(&l.

ES6返回JSX的两种方式

虚怀若愚

02-25

1055

文章目录方式1：直接返回（注意圆括号内包含JSX表达式）方式2：返回一个数组工作中遇到根据条件判断返回JSX的情况，做个小结方式1：直接返回（注意圆括号内包含JSX表达式） return ( <MonthPicker className={styles.element} format='YYYY-MM' placeholder='请选择月份' onC...

c语言程序中没有return0,使用vs2017编写C语言程序，为什么提示说“return 0；”前面要加上“；”（书上是不加；的）...

weixin_31238109的博客

05-17

995

最佳答案题主的贴图实在是看不清，我只能连蒙带猜着“还原”源代码如下：题主的问题是为何编译器会提示“return 0;”前要加上“;”，原因是：C语言的每条语句(statement)必须以“;”作为结束的标识。显而易见，上图中第5行并不是以“;”结尾，所以才会被提示错误。题主的另一个问题是如何让自己写的程序运行结束不再“一闪而过”。很简单，使用system( )函数来调用操作系统命令。既然是调用操作...

React render return 空行问题

weixin_30595035的博客

04-27

395

Uncaught Invariant Violation: App.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object. 原本：然后改成这样： ...

React return返回值要不要加括号的问题以及扩展

胡聊前端的博客

05-26

3454

在react组件中返回JSX时，我们一般会这样写： function Square(props) { return ( <button className="square" onClick={props.onClick}> {props.value} </button> ); } 如果JSX标签仅有一行，也可以省略括号。像这样 function getGreeting(user) { if (user) { return <h1

ReactJs之render

starwmx520的博客

09-28

768

React.createClass在创建模块时，肯定会有render方法的。下边是我列出的常用的技巧： 1、模板内可嵌套其他的模块 2、当模板内需要引用js变量或方法时时用{XX}。且方法需要写在render:函数内。 3、this.props.XX.map(fn)可以遍历数组函数内需要返回模板写法和render函数返回一样 return ( ) 4、模板内可以直接{arrhtml}

React return的写法

onegoldensun的博客

07-25

8319

菜鸟教程用的是 jsx ，需要经过 babel-react 过的。知道它的原理就可以了，因为 return div>div> 最终会被babel-react 转换成类似 return createElement('div') 所以只需要确保 return 的是一个根节点的，像下方这样的是不行的。 return (div>111div>div>222div>)

网站建设之 react return

HeroIsUseless的博客

10-08

490

幸亏国庆恶补React，现在感觉良好菜鸟教程用的是 jsx ，需要经过 babel-react 过的。知道它的原理就可以了，因为return <div></div> 最终会被babel-react 转换成类似 return createElement('div') 如果return 后面没有括号,第一行的内容一定要和return 写在一起，如果JSX标签仅有一行，也可以省略括号。但实际上，多行也可以不加括号，但return后边不可以有换行，然而JSX可以有。 React.Fra

jsx 里获取元素_如何在JSX中返回多个元素

cuk0051的博客

08-31

1132

jsx 里获取元素When writing JSX in React, there’s one caveat: you must return one parent item. Not more than one. 在React中编写JSX时，有一个警告：您必须返回一个父项。不超过一个。 For example, this is not possible: 例如，这是不可能的： con...

深入解析：JSX在render函数中的实战应用与模板优化

本文将深入探讨JSX在React组件的render函数中的应用。首先，我们将简要回顾JSX的基本概念。JSX是一种在JavaScript代码中嵌入HTML元素的语法扩展，它使得开发者能够以更直观的方式描述用户界面（UI）。例如，通过以下...