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的