这应该不是什么大问题，但是您可以删除三元运算符前面的空格（并将其添加到.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(' ')} />

它是可以接受的？？还是一种不良的做法？？，有没有好的解决办法？
这是完全可以接受的，也不是一个坏习惯：如果class属性中有一些额外的空间，对HTML没有任何实际的区别。
一个简洁的解决方案，也可以简化，例如使用多个条件类，是使用classnames包。这是一个小型的JavaScript实用函数，用于此目的（即有条件地设置类）。使用classnames，您的示例看起来如下所示：

import classNames from 'classnames';
...
<div className={classNames('container', { 'bg-green': someCondition })}>

...这样container类将始终存在，而bg-green类将仅在someCondition为true时存在。这使得在需要时添加更多的条件类变得容易（您可以向该对象添加更多的键），并且您无需担心空格。

对于这个特殊的例子，我想说最优雅的解决方案是：

<div className={`container${ condition && " some-class"`} />

您可以在官方React文档here中阅读有关条件渲染的信息。