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

[haizhilin2013]

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

[tiyunchen]

没有问题，
但是如果你return 后面再换行就有问题了， 所以一般用小括号包住

[Caoyu-beyond]

报错，编译失败

[467827183]

我觉得return那个()代表着一个整体如果不加的话肯定会出问题

[467827183]

我觉得return那个()代表着一个整体如果不加的话肯定会出问题，查了一些资料说是只要能return一个根节点就不会报错

[Caoyu-beyond]

不换行没问题，换行了就得用()包住。

[MagicalBridge]

我们在使用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.

上面这段英文翻译成中文：

• 渲染没有返回任何内容。这通常意味着缺少return语句。或者，为了不渲染，返回null。

为了代码可读性我们一般会在return后面添加括号这样代码可以折行书写，否则就在return 后面紧跟着语句，这样也是可以的。

举两个正确的书写例子：

const Nav = () => {
  return (
    <nav className="c_navbar">
      { some jsx magic here }
    </nav>
  )
}

const Nav = () => {
 return <nav className="c_navbar">
    { some jsx magic here }
  </nav>
}

错误的写法：

const Nav = () => {
  return
    <nav className="c_navbar">
      { some jsx magic here }
    </nav>
}

[Jony-CN]

为了好看!

[NieShiyi]

一般来说是要用括号包裹，特别是返回值是一个表达式的时候，而且也比较规范好看，建议使用括号包裹。但是不加括号也不会报错，及时换行了也不会报错，我以前在项目里经常这么写都没问题。

[wjrhyw]

一个是符合规范，一个如果不加()，如果新起一行去写reactNode的话，是会报错的

[shuch]

如果只返回一个react元素，没有问题：

export default function App() {
  return <a>aaa</a>;
}

[cuideqi]

这是自动分号补齐 ( auto semicolon insertion，简称ASI ) 一个常见的坑。
function sum(x, y) {
return
x+y;
}
会被解析成
function sum(x, y) {
return；// 这里被自动加上了分号
x+y;
}
所以调用sum函数永远返回undefined;
推荐阅读：https://justjavac.com/javascript/2013/04/22/automatic-semicolon-insertion-in-javascript.html

[LiFeng007]

使用()sx语句可以换行,如果不使用()任然换行的话会有编译失败的错误信息
为了便于开发者阅读代码,建议加()

[JR-noble]

希望作者能给一个答案,看评论区好多说法,刚入门的小菜鸡,轻喷

[Susie350]

官网文档：“为了便于阅读，我们会将 JSX 拆分为多行。同时，我们建议将内容包裹在括号中，虽然这样做不是强制要求的，但是这可以避免遇到自动插入分号陷阱。”