React中的条件类名？

Question

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

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

例如:

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

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

<div class="container  "> 

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

Answer 1

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

Answer 2

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

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

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

或

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

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

Answer 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' : ''}"`)