React 中的条件类名？

Question

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

有时我需要在反应中使用三元运算符向元素添加一个类，并且当条件返回false时可能会留下一些空间

例如：

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

当条件是true，类被添加到div，但是当它是false，则检查当在元件中所示的丑陋空间

<div class="container  "> 

可以接受吗？？还是不好的做法？？？，有没有好的解决方案？

Answer 1

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

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

我没试过，但你也可以.trim()像下面一样添加一个，但我认为你不需要它。

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

演示：

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