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

Question

在我参与过的大多数 React 项目中，我遇到了几个 JSX 实例，其中属性用大括号括起来，{''}或者不使用大括号''。例如。<input name={'name'} />和<input name='name' /><div id={'id'}>...</div>和<div id='id'>...</div>代码看起来编译得很好。使用大括号和不使用大括号的主要区别是什么？

Answer 1

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

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

Answer 2

可以使用 {''} 和 "" 作为字符串文字，但另一方面，如果您想动态分配值，则应该使用 {}

<div className={classes.styles}>..</div>