如何正确合并固定类名与三元运算符生成的className？

你之前的写法错误在于给条件表达式多套了一层大括号，导致把逻辑结果变成了对象，字符串拼接时会输出[object Object]，自然出问题。下面是几种靠谱的实现方式：

• 字符串拼接法：去掉多余大括号，记得在固定类名后面加空格，避免动态类名和固定类名连在一起

className={"app__header app__flex " + (darkMode ? "dark-mode" : "light-mode")}

• 模板字符串法：ES6的模板字符串语法更直观，可读性更高

className={`app__header app__flex ${darkMode ? "dark-mode" : "light-mode"}`}

• 数组join法：如果后续要加更多动态类名，这种方式扩展性更好，把所有类名放进数组再用空格拼接

className={["app__header", "app__flex", darkMode ? "dark-mode" : "light-mode"].join(" ")}

注意：不管用哪种方式，都要保证类名之间有空格分隔，否则会生成无效的CSS类名。

内容的提问来源于stack exchange，提问作者Asad Shah