reactjs - Redux 中的 className 语法

Question

我目前正在学习 React 和 Redux。我已经 fork 了一个样板，目前我正在查看所有代码以了解它们如何组合在一起。

在浏览一些 React 组件文件时，我发现了一些非常有趣的东西!为许多元素设置 className 时，它们使用的语法有所不同。他们第一次使用以下语法:

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

然后这个语法:

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

从那时起，他们使用以下内容:

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

在文件顶部，他们导入类，内容如下:

import classes from './Counter.scss'

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

Answer 1

从简单的案例开始:

<button className='btn btn-default'>

这只是将类名设置为“btn btn-default”。您需要设置 className 而不是 class，因为您正在编写 JSX，这相当于设置 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;

最后，使用 import classes from './Counter.scss' 语法导入的 classes 是一项名为 “CSS modules” 的功能。 。它涉及一个预编译器步骤，稍后正确设置类名称并确保样式定义呈现为 HTML。

所以回答你的最后一个问题，所有这些都是正确的。您想要使用什么取决于您想要定义样式的位置(或者定义样式的位置)。如果您要创建甚至可能在其他地方重用的独立组件，那么使用 CSS 模块非常有意义。当您有一个只想使用的现有样式表时，使用全局 CSS 是很好的选择(例如，这里，这些类名可能来自 bootstrap )。当然，如果您有全局样式并且想要向其中添加其他样式，您也可以混合使用这些样式。