胖箭頭 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 可以很好地工作 - 取決於您。

請注意，三元與此問題無關。