无法设置动态类名

Question

我有这个组件：

const MyComponent = () => {
    const [tab, setTab] = useState("tab1");
    
    return(
    <>  
        <a href="#" id="tab1-tab" className="{`someclass ${tab == 'tab1' ? 'active' : ''}`}">Tab1{tab}</a>
        <a href="#" id="tab2-tab">Tab1</a>
    </>
    );
}    

如果我避免设置动态 className 并拥有：

className="active"    

对于第一个选项卡，它将被选中（带有 css 下划线）

但执行上述操作不会选择第一个选项卡。如您所见，useState 设置变量“tab”=“tab1”。 它也被打印出来了，我可以在页面上看到“tab”等于“tab1”。但是，使用三元运算符似乎不起作用。我尝试了许多变体，但大多数示例都显示了带有布尔值的三元（而在我的情况下，它是一个字符串比较），我不知道这是否可能是问题（即语法需要不同）。

Answer 1

确保正确使用模板文字：

const MyComponent = () => {
    const [tab, setTab] = useState("tab1");
    
    return(
    <>  
        <a href="#" id="tab1-tab" className={`someclass ${tab == 'tab1' ? 'active' : ''}`}>Tab1{tab}</a>
        <a href="#" id="tab2-tab">Tab1</a>
    </>
    );
}