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向左保存，然后选择向右对齐，我将得到text-align-left text-align-right而不是最后选择的那个。

Answer 1

请检查以下内容：

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

Answer 2

classnames允许您有条件地包括类名，但是您需要将条件类包装在{}

中

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

简单的条件ES6模板文字

2 个答案: