ES6中箭头函数加不加大括号的区别_you are using the in-browser babel transformer. be-CSDN博客

本文链接：https://blog.csdn.net/David_jiahuan/article/details/102783171

本文探讨了ES6箭头函数在React中的应用，详细对比了带与不带大括号情况下箭头函数的行为差异，强调了return关键字的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前一直没用过ES6的箭头函数，最近在学习React的相关知识的时候，发现里面用到了许多箭头函数的写法，自己在使用箭头函数的大括号的时候也遇到过问题：You are using the in-browser Babel transformer. Be sure to precompile your scripts for production !

===========================下面就直接上代码===========================

1、不带大括号的情况：

function NumberList(props) {
  const numbers = props.numbers;
  const listItem = numbers.map( (number) => 
       <ListItem key={number.toString()} value={number} /> 
  );
  return (
    <ul>
    	{listItem}
	</ul>
  );
}

这时箭头函数指向的就是这个函数的返回值，如果只用到返回值的时候，只写一个箭头就可以了。

2、带大括号的情况：

function NumberList(props) {
  const numbers = props.numbers;
  const listItem = numbers.map( (number) => {
       return <ListItem key={number.toString()} value={number} /> 
  });
  return (
    <ul>
    	{listItem}
	</ul>
  );
}

这时就相当于一个function的代码块，是需要写上返回值的，就是要把值 return 出去，否则就不会有结果的。