Redux中的className语法

Question

我目前正在学习React和Redux。我分叉了一个样板，目前我正在浏览所有的代码，看看它如何组合在一起。

在扫描一些React组件文件时，我发现了一些非常有趣的东西！当为许多元素设置className时，它们使用的语法不同。他们第一次使用的语法如下：

<span className={classes['counter--green']}> 
    ... 
</span> 

那么这句法：

<button className='btn btn-default'> 
    ... 
</button> 

并从那里出来，他们使用以下命令：

<h2 className={classes.counterContainer}> 
    ... 
</h2> 

在文件的顶部他们通过以下方式输入classes：

import classes from './Counter.scss' 

所以简单地说我的问题是，为什么有三种不同的className语法，哪一个是正确的？

Answer 1

用简单的情况下开始的链接属性的引导类：

<button className='btn btn-default'> 

这只是设置类名"btn btn-default"。由于您正在编写JSX，因此您需要设置className而不是class，这相当于设置了className DOM property，因此您必须在此处使用className。

<span className={classes['counter--green']}> 
<h2 className={classes.counterContainer}> 

这些都非常相似。在JSX中，要指定更复杂的JavaScript表达式，您需要将其放在大括号内。这将是等效于设置className属性是这样的：

someSpan.className = classes['counter--green']; 
someH2.className = classes.counterContainer; 

最后，classes使用import classes from './Counter.scss'语法进口是一个叫“CSS modules”功能。它涉及一个预编译器步骤，可以在稍后正确设置类名，并确保将样式定义呈现给HTML。

所以要回答你最后的问题，所有这些都是正确的。你想要使用什么取决于你想要定义你的样式的位置（或者它们被定义的位置）。如果您正在创建可能在其他地方重用的独立组件，那么使用CSS模块会很有意义。当你有一个你想使用的现有样式表时，使用全局CSS是很好的（例如，在这里，这些类名可能来自bootstrap）。当然，如果您拥有全球风格并希望为其添加其他样式，也可以混合使用这些样式。

Answer 2

这对于className来说并不是独一无二的，但对于任何JSX，您可以使用大括号{}从“JSX模式”切换回JavaScript以使用任何JS表达式。因此，在第一个示例中，他们通过在属性counter--green中引用名为classes的对象来设置属性className，在第二个示例中它们使用简单的JSX字符串文字'btn btn-default'，并且在第三个示例中它们通过属性引用classes对象counterContainer。您可以根据问题末尾的导入来查看类对象的定义。

他们都是正确的，他们只是不同的方式。通过使用JS表达式，它们可以说是更加模块化的，通过使用字符串文字，可以更容易地看到前方发生了什么，但重用性较差。

Answer 3

在这种情况下，没有看到代码，我猜这个样板文件是使用模块化的css（scss）。

模块化css可以导入，在这种情况下为类。使用模块化css为您提供本地范围的css

从模块导入的所有css规则都是以类为前缀的。

，当你把对象属性

这样的CSS规则counterContainer作为

classes.counterContainer 

CSS规则名称将被处理反绿不能用点号（因为连字符），所以必须使用方括号和字符串名称符号作为任何javascript对象属性

classes['counter-green'] 

第三个示例btn btn-default不是从css类模块导入的，而是全局导入的。这可能是在根级别的导入为对index.html的