反应类名定义

Question

React 中的 className = 'name' 和 className = {'name'} 有区别吗？我知道您可以在 {} 中使用变量，但我的问题是专门针对那些括号 {''} 中的字符串。我试图在代码中对此进行模拟，在我看来两者都是一样的。谁能证实这一点？

Answer 1

不，没有区别。当您写 {'name'} 时，它被解释为 'name'。就像你写 {'name' + 'name2' }，它被解释为 'name name2'.

Answer 2

如果您写的是单个 class 名称，则两种表示法没有区别，即 className="name" 与 className={'name'}

相等且相同

然而，当我们想要给出一个条件 class 时，我们使用这个 {} 符号。例如：

<p className={this.state.hidden ? "hidden" : ""}>Hello World</p>

如果状态变量 hidden 设置为 true，上面的行给 <p> 标签一个 class 隐藏。当我们想在渲染函数中编写 JavaScript 代码时，我们在 React 中使用花括号 {}。我们可以用它来连接两个字符串 class 名称或条件 class 名称。