React中JavaScript箭头函数用大括号无效，小括号却正常

DevOps 小满

2026-8-9

箭头函数括号/大括号与JSX渲染的问题解析

你遇到的问题核心是箭头函数的隐式返回和显式返回的区别：
- 用小括号包裹JSX时，属于箭头函数的隐式返回写法，比如：
```
const MyComponent = () => (<div>这是内容</div>)
```
  这种写法会自动把括号里的JSX作为函数返回值，所以能正常渲染。
- 换成大括号后，箭头函数进入了显式返回模式，大括号代表函数体，如果你只写JSX而不加return，函数就没有返回值，自然渲染不出内容。正确写法应该是：
```
const MyComponent = () => {
  // 这里可以添加其他执行语句
  return <div>这是内容</div>
}
```
你记得“箭头函数包含多个语句时需要用大括号”是完全正确的，大括号用来包裹多语句的函数体，但只要需要返回JSX，不管函数体里有多少语句，都必须显式写上return来返回JSX元素，不然组件就没有可渲染的内容。