Блог

У меня есть этот компонент:

 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="active"    
 

для первой вкладки она будет выделена (подчеркнута css).

Но выполнение действий, описанных выше, не приведет к выбору первой вкладки. Как вы можете видеть, useState устанавливает переменную «tab» = «tab1». Он также печатается, и я вижу на странице, что «tab» равно «tab1». Однако использование троичного оператора, похоже, не работает. Я перепробовал много вариантов, но большая часть примера показывает троичный с логическими значениями (в то время как в моем случае это сравнение строк), и я не знаю, может ли это быть проблемой (т. Е. синтаксис должен быть другим).

Убедитесь, что вы правильно используете шаблонные литералы:

 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>
    </>
    );
}