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表达式，以增加代码的可读性，并添加为per the docs，

建议将其括在括号中以避免陷阱 automatic semicolon insertion

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

2 个答案: