在className中的三元运算符后组合文本和JS

Question

在三元/条件后面的for className后面，我在组合文本和CSS样式时遇到问题。我看了很多不同的例子，但似乎什么都不起作用。

<div className={key === active ? ({ 'column ' + styles.Active}) : ('column ')} key={key}>

有人能告诉我如何最好地正确格式化吗？我需要栏和样式。如果键===处于活动状态，则显示Active classNames。

提前感谢

Answer 1

这是相同的解决方案，但最好的方法是

<div className={key === active ? `column ${styles.Active}` : 'column'}>

它更具可读性、自我解释性和谨慎性，这是编写代码的方式，而不是其他方式。。

className需要一个字符串，而您给了它一个对象｛'column'+styles.Active｝，这是错误的。

另外，我不理解你的逻辑。样式。活动将是一个对象，它属于样式(样式对象(。如果是这样的话，你又做错了。。

<div className="column" style={key === active ? styles.Active : {}}>

Answer 2

如果你可以添加一个npm包，你可以使用类名

import classNames from 'classnames';
...
<div className={classNames('column', { [styles.Active]: key === active })} key={key}>

=====================

如果你不想添加一个npm包

<div className={'column ' + (key === active ? styles.Active : '')} key={key}>

Answer 3

为了可读性，最好将其提取到变量中。不过，三元可以很容易地内联。

字符串文字

对于那些喜欢ES6+的人

// Ternary
const className = `column ${(key === active) ? styles.Active : ''}`;
// Or a little more readable
const className = 'column';
if (key === active) {
className += ` ${styles.Active}`;
}
...
<div className={className} key={key}>

级联

目前字符串串联似乎更快：(https://jsperf.com/es6-string-literals-vs-string-concatenation/49)

// Ternary
const className = 'column' + ((key === active) ? ' ' + styles.Active : '')}`;
// Or a little more readable
const className = 'column';
if (key === active) {
className += ' ' + styles.Active;
}
...
<div className={className} key={key}>

Answer 4

试试这个。取出色谱柱，只在关键上操作三元

<div className={'column ' + (key === active ? styles.Active : '')} key={key}>

Answer 5

我找到了一种简单的方法来实现这一点，使用数组并加入它，这是一个有点老的问题，但也许它会帮助其他人。

className={ [ isMobile ? 'small' : 'large' , darkTheme ? 'dark' : 'light' , isSomething ? 'classX' : 'classY' ].join(' ') }