reactjs - 不能在 jsx 顶层包含代码执行？

Question

对于下面的代码，当包含行 {console.log('hello');} 时会抛出异常

import "./styles.css";

export default function App() {
  const ages = [1, 2];
  return (
    <>
      {ages.map((age) => (
        {console.log('hello');} //include this code gives unexpected token
        <h1>{age}</h1>
      ))}
    </>
  );
}

出现这个错误的语法规则是什么？

Answer 1

您正在混合使用箭头函数的语法。有一个隐式返回模式可以帮助跳过 return 语句，但是你不能在代码中编写语句。您必须编写要返回的表达式。

使用花括号和回车:

      {ages.map((age) => {
        console.log("hello");
        return <h1>{age}</h1>;
      })}

Arrow functions details

Sandbox