javascript - 使用 {} 和 '' 作为属性值有什么区别？

Question

在我参与过的大多数 React 项目中，我遇到了几个 JSX 实例，其中属性用大括号括起来{''}，或者它不使用大括号''。

例如。

<input name={'name'} />和<input name='name' />

<div id={'id'}>...</div>和<div id='id'>...</div>

代码似乎编译得很好。

使用大括号和不使用大括号的主要区别是什么？

标签： javascriptreactjs

Answer 1

外部花括号告诉 JSX 解析器该语法应该被解释为 javascript。然后里面的引号是字符串。不必要且浪费额外的输入，但 `` 用于将动态变量放入其中，通常用于 css 目的。例子：

className={`${inverted ? 'inverted' : ''}`}