Простые условные литералы шаблона ES6

Question

Я пытаюсь создать простой условный оператор, используя литералы шаблона.Я добавляю имя класса text-align-left или text-align-right и т. Д. На основе переменной align.Если переменная align пуста, имя класса не должно отображаться.

Я пытался:

className={ classnames( 
    someVar,
    ${align} ? text-align-${align} : ''`,
) }

className={ classnames( 
    someVar,
    `text-align-${align}`: align,
) }

className={ classnames( 
    someVar,
    [ `text-align-${align}` ]: align, 
) }

Последний не выдает никаких ошибок, но создал несколько классов, потому что align имеет больше значений.Если я выберу, например, aligb left, сохранить, затем выбрать align right, я получу text-align-left text-align-right вместо последнего выбранного.

Answer 1

classnames позволяет вам условно включать имена классов, но вам нужно обернуть условные классы в {}

className={classnames( 
    someVar,
    { `text-align-${align}`: ${align} }
)}

Answer 2

Пожалуйста, проверьте это:

className={classnames( 
    someVar,
    (align ? ('text-align-' + align) : '')
)}