胖箭头 function 用圆括号代替花括号？！ 为什么？

Question

import React from "react";
import Hill from "./Hill";
import Animal from "./Animal";

const fav = "hill";

这是行不通的；

//        const App = () => {
// <>
// <h1> my fav card</h1>;
//     {fav === "hill" ? <Hill/> : <Animal/>}
// </>
// }

当我使用插入花括号的括号时，此代码有效...为什么？

const App = () => (
  <>
    <h1> my fav card</h1>;
    {fav === "hill" ? <Hill /> : <Animal />}
  </>
);
export default App;

Answer 1

箭头函数可以有一个表达式，也可以有一个 function 主体，例如：

const five = () => 5;

或者

const five = () => {
    return 5;
}

注意第二个需要使用return来返回它的返回值。

如果您使用 return 语句返回您的 JSX，那么带大括号的代码将起作用。

Answer 2

箭头函数可以隐式返回胖箭头之后的值（在您的情况下，该值是括号中的值）。

如果使用方括号，则需要使用“return”关键字显式返回一个值（如常规 function 定义）。

如果你想使用括号（好处是如果你以后想在 return 语句之外添加一些逻辑而不需要以后添加括号），只需将当前代码用括号括在括号中并在前面放一个“return”其中。 否则，使用箭头 function 可以很好地工作 - 取决于您。

请注意，三元与此问题无关。