何时使用模板文字而不是经过评估的JSX

Question

我正在完成一个反应初学者的在线课程。 讲师显示了第一行代码，它可以工作。 加上反引号等。

但是第二个示例也可以正常工作，并且更易于键入和阅读。

有关系吗？什么时候首选第一个示例？ 他们的东西是第二个例子不能做到的吗？

return (
  <h1>Hello {`${firstName} ${lastName}`}!</h1>
)

但是我注意到下一行代码同样有效，并且更易于键入和阅读。

return (
  <h1>Hello {firstName} {lastName}!</h1>
)

Answer 1

如果您必须使用不存储在变量中的字符/值构建复杂的字符串，则可以使用模板文字。

示例：PORT

我知道这不是一个“复杂”的示例，并且可以通过其他方式轻松完成，但是您可以想象必须在更复杂的场景中执行此操作。

您还可以将其保存为自己的变量，以防您需要重用它。

ENTITY

然后您只需要`${lastName}, ${firstName}`而无需模板文字。

Answer 2

模板文字（带有反引号和$）是在ES6中构建字符串的通用方法，而大括号仅用于在JSX中评估Javascript。如果要在JSX中呈现Javascript，并且不需要反引号和$，则不要使用它们。