为何无状态函数表达式中console.log会报错？如何正确使用？

一、为什么你的代码会报错？ #

你写的这段代码：

const Layer = (props) => ( console.log(props); //breaks )

问题出在箭头函数的简写语法规则上：当箭头函数用()来省略{}和return时，括号内部只能放单个表达式，而不能是带分号的语句（console.log(props);就是一个完整语句）。JavaScript会把圆括号里的内容当作表达式解析，这里的分号和语句组合直接违反了语法规则，自然就会报错。

说白了，这种简写形式是用来直接返回单个表达式结果的，没法塞进带分号的语句哦。

二、怎么正确在箭头函数里使用console.log？ #

有两种常用的正确写法，按需选择：

1. 用大括号包裹函数主体（推荐，可读性更强） #

把箭头函数的主体用{}包裹起来，这样就可以写任意多的语句，包括console.log，如果需要返回值的话手动加上return就行：

const Layer = (props) => {
  console.log(props); // 这里能正常执行
  // 如果是React组件，记得返回JSX元素
  return <div>这是Layer组件</div>;
};

2. 使用逗号表达式（不推荐，仅适合简单场景） #

如果你一定要用圆括号的简写形式，可以用逗号表达式——它会依次执行逗号前的所有内容，最后返回最后一个表达式的结果：

const Layer = (props) => (console.log(props), <div>这是Layer组件</div>);
// 先执行console.log(props)，再返回后面的JSX元素

不过这种写法可读性较差，除非是非常简单的场景，否则更推荐第一种写法。

内容的提问来源于stack exchange，提问作者nir.segev