简单的条件ES6模板文字

时间:2018-12-16 22:42:51

标签: reactjs jsx

我正在尝试使用模板文字创建一个简单的条件语句。我基于text-align-left变量添加类名text-align-rightalign等。如果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而不是最后选择的那个。

2 个答案:

答案 0 :(得分:1)

请检查以下内容:

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

答案 1 :(得分:0)

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

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