React 中的條件類名？

Question

可能是一個微妙的問題，但我不喜歡在瀏覽器中檢查元素時出現的方式

有時我需要將 class 添加到使用三元運算符做出反應的元素中，並且當條件返回false時可能會留下一些空間

例如：

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

當條件為true時，class 被添加到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()}

演示：

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

Answer 2

這不應該真的打擾你太多，這沒什么大不了的......

無論如何，添加間距作為條件的一部分來解決它：

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

或者

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

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