提问者:小点点

React中的条件类名?


这可能是一个微妙的问题,但我不喜欢在浏览器中检查元素时出现的方式

有时我需要使用三元运算符向react中的元素添加类,这样当条件返回false时可能会留下一些空间

例如:

<div className={`container ${some condition ? 'bg-green' : ''}`}

当条件为true时,类被添加到div中,但当条件为false时,检查时元素中会显示一个难看的空格

<div class="container  "> 

可以接受吗?? 或者是一个不好的实践??,有没有一个好的解决方法呢?


共3个答案

匿名用户

这应该不是什么大问题,但是您可以删除三元运算符前的空格(并将其添加到.bg-green分支中)

<div className={`container${some condition ? ' bg-green' : ''}`}

我没有尝试过,但是您可以添加一个.trim(),就像下面这样,但是我认为您不需要它。

<div className={`container${some condition ? ' bg-green' : ''}`.trim()}

演示:

console.log(`"container${true ? ' bg-green' : ''}"`)
console.log(`"container${false ? ' .bg-green' : ''}"`)

匿名用户

你不应该太在意,没什么大不了的。。。

不管怎么说,把间距作为条件的一部分加上来求解:

<div className={`container${someCondition ? ' bg-green' : ''}`}

const classes = ['container'].concat(condition ? 'foo' : [];

return <div className={classes.join(' ')} />

匿名用户

使用undefined代替double qoute,这样就不会发生这种情况。