React踩坑日记（1）- 箭头函数后面的大括号带还是不带呢？

一、用箭头函数写了一个遍历组件的方法

今天copy的时候发现了一个问题，代码如下：

/**
 * @Description:
 * @param {e} 数组
 * @param {Panel} const { Panel } = Collapse;  antd的折叠面板组件
 */
showPanel = e => {
  e.length > 0 ? (
    e.map(item => {
      return (
        <Panel extra={item.time} header={item.title} key={item.key}>
          <div dangerouslySetInnerHTML={{ __html: item.message }} />
        </Panel>
      );
    })
  ) : (
    <Empty />
  );
};

在页面中的引入如下：

<Collapse accordion onChange={e => console.log('e ', e)}>
    {this.showPanel(data)}
</Collapse>

  但是，页面上一直渲染不出任何东西。我看了半天，也没发现哪儿写错了，然后请教了一下同学，他也没有发现哪儿写错了，然后他看了antd的文档，看到了这种写法，告诉我，箭头函数后面不带大括号就好了。
我试试了，果然页面正常渲染了。但是并不知道问题的原因出在哪儿。

二、问题原因，箭头函数没有带return

  然后我就看了阮一峰老师写的ES6语法链接，找到箭头函数这一章，看到了这么一行

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。
// 报错
let getTempItem = id => { id: id, name: "Temp" };
// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });

  但是看了一下，发现这个对不上我的问题呀！我返回的是一个数组，并不是一个对象啊。然后仔细看了文档后发现了这么一句话

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

  然后发现了问题所在，乍一看上面写的遍历组件方法，似乎是带了return啊。但是看那个return并不属于最外层大括号的，而是map方法后面箭头函数所属的。这样就能解释清楚了。

  遍历方法用了大括号，但是没有带return，ES6语法规定，如果没有带大括号，则默认带上return，如果带了大括号，则不会默认带上return。这也就是上面不带大括号，却能正常渲染的原因啦！

//第一种 带大括号，加上return
showPanel = e => {
  return e.length > 0 ? (
    e.map(item => {
      return (
        <Panel extra={item.time} header={item.title} key={item.key}>
          <div dangerouslySetInnerHTML={{ __html: item.message }} />
        </Panel>
      );
    })
  ) : (
    <Empty />
  );
};
//第二种 不带大括号，es6语法会默认带上return
showPanel = e =>
  e.length > 0 ? (
    e.map(item => {
      return (
        <Panel extra={item.time} header={item.title} key={item.key}>
          <div dangerouslySetInnerHTML={{ __html: item.message }} />
        </Panel>
      );
    })
  ) : (
    <Empty />
  );
  

如有错误或有纰漏，欢迎指点！