带有三元括号而不是花括号的胖箭头功能！！！为什么？

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

箭头函数可以具有表达式或函数体，例如：

const five = () => 5;

或

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

请注意，第二个需要使用return返回其返回值。

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

Answer 2

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

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

如果您要使用方括号（好处是将来希望在return语句之外添加一些逻辑而无需以后再添加方括号），只需将当前代码用括号括在方括号中，然后将“返回” ”。否则，使用箭头功能就可以很好地工作-取决于您。

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