如何在 React JS 中使用状态作为"active"指标

Question

我有一个状态，显示哪个菜单选项卡当前处于活动状态

const [activeTab, setActiveTab] = useState("home");

我在我的标记上使用状态作为类

<div className={`${activeTab}`}>
<img src={Assets.Home} alt="Home" />
<p>Home</p>
</div>
<div className={`${activeTab}`}>
<img src={Assets.Wallet} alt="Wallet" />
<p>Wallet</p>
</div>

但这不起作用，因为当状态更改时，它会更改两个div的类名。现在我想要一种使用状态作为active indicator的方法。我试着为每个div附加一个额外的类，比如这个

<div className={`home ${activeTab}`}>
<img src={Assets.Home} alt="Home" />
<p>Home</p>
</div>
<div className={`wallet ${activeTab}`>
<img src={Assets.Wallet} alt="Wallet" />
<p>Wallet</p>
</div>

这样我就可以在CSS中定位。像这个

.home.home{
//some code
}

虽然上述方法有效，但它很混乱。理想情况下，我只想使用state作为类名，而不需要任何额外的添加。我该怎么做？

Answer 1

使用条件呈现来检查特定类是否处于活动状态，并在这种情况下为其分配一个单独的类active：

const [activeTab, setActiveTab] = useState("home");
<div className={`${activeTab === 'home' ? 'active' : ''}`}>
<img src={Assets.Home} alt="Home" />
<p>Home</p>
</div>
<div className={`${activeTab === 'wallet' ? 'active' : ''}`}>
<img src={Assets.Wallet} alt="Wallet" />
<p>Wallet</p>
</div>

然后，您可以通过定义：来定位CSS中的活动类

.active {
...
}

Answer 2

在标记处添加onClick处理程序以处理activeTab状态，如<div onClick={() => setActiveTab("home")} className={${activeTab}}>{...}</div>

对于您的情况，您只需要这样做：

<div onClick={() => setActiveTab("home")} className={`home ${activeTab}`}>
<img src={Assets.Home} alt="Home" />
<p>Home</p>
</div>
<div onClick={() => setActiveTab("wallet")} className={`wallet ${activeTab}`}>
<img src={Assets.Wallet} alt="Wallet" />
<p>Wallet</p>
</div>