React 或 JSX 中大括号和括号包装之间的差异

Question

为什么在下面的开始代码段中，const user用大括号括起来，const element用括号括起来？

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);
ReactDOM.render(
  element,
  document.getElementById('root')
);

Answer 1

当您使用时：

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

您正在使用JSX，它提供了类似Javascript XML的语言，它就像一个预处理器。

否则，当您使用：

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

您正在创建一个普通的 Javascript 对象，您可以在其中存储数据并像user.firstName或user.lastName一样访问它。

Answer 2

在第一种情况下：

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

用户是一个object，有key: value对，因此{}

而在第二种情况下，

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

包装在()中的多行 JSX 表达式以增加代码的可读性，并且根据文档，

建议将其括在括号中，以避免陷阱 自动分号插入。