时间戳

首页 > 解决方案 > 为什么在某些情况下在 React 中我们使用圆括号而不是花括号

reactjs - 为什么在某些情况下在 React 中我们使用圆括号而不是花括号

问题描述

这是我看到圆括号而不是花括号的示例。

export const Navbar: React.FC = () => (
<nav>
<div className="nav-wrapper purple lighten-1 px1">
  <a href="#" className="brand-logo">React + Typescript</a>
</div>
)

标签： reactjs

解决方案

将圆括号视为“返回”，您说的是“继续并返回此”，而花括号则视为您说的函数体，“让我做一些额外的处理，然后我会告诉你还什么。”

这两个语句是相同的：

export const Navbar: React.FC = () => (
  <nav>
    <div className="nav-wrapper purple lighten-1 px1">
      <a href="#" className="brand-logo">React + Typescript</a>
    </div>
  </nav>
)
export const Navbar: React.FC = () => {
  return (
    <nav>
      <div className="nav-wrapper purple lighten-1 px1">
        <a href="#" className="brand-logo">React + Typescript</a>
      </div>
    </nav>
  )
}

它们的作用相同，但是如果您需要进行一些处理、格式化或其他操作，第二个允许您在返回之前添加额外的代码。如果您不这样做，那么以一种或另一种方式进行操作更像是一个偏好问题。

推荐阅读