這些天來，我嘗試學習全堆疊開發技能。經過幾門課程后，我們開始接觸 React。整個使用的系統是一個安裝了 React 的 localhost npm 服務器。稍后我們將安裝 Mongo 和 Express。
本課的主題是，某種帶有 2 個選項卡的 Webshop：導航欄中的專案和購物車，以及自動填充的商店專案或所選用戶購物車專案的串列。
標題中的導航欄由 2 個 <li-<button "Items" / "Cart" 元素組成。這些元素應根據全域鉤子 const activeTab 動態獲得它們的類名。語法如下：
const Nav = ({activeTab, onTabChange}) => {
const itemClass = tabName =>
`App-nav-item ${
activeTab === tabName ? 'selected': ''
}`;
return (
<nav className="App-nav">
<ul>
<li className={itemClass('items')}>
###
我理解，itemClass 是字串“App-nav-item”和字串“selected”或“”的模板文字。結果應該是 App-nav-itemselected 或 App-nav-item
但結果是 App-nav-item.selected ！為什么？在 CSS 中我必須解決 App-nav-item.selected，我不明白。對于任何資訊，我將不勝感激:)。
謝謝！
uj5u.com熱心網友回復：
結果應該是 App-nav-itemselected 或 App-nav-item
App-nav-item不，和之間有一個空格${...}。它將是App-nav-item selected或App-nav-item。
className 屬性映射到class 屬性，該屬性接受以空格分隔的類名串列。
class="foo bar"
在一個選擇器中，當撰寫多個針對同一元素的選擇器（無論是型別選擇器、類選擇器、屬性選擇器、其他選擇器還是上述任何一種選擇器）時，它們只是簡單地混合在一起。
.foo.bar
簡而言之：不同的語言=不同的語法。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/487423.html
標籤：javascript css 反应