JS6模板字面量实现React动态CSS类名的疑问

你忽略了模板字符串里的半角空格，最终拼接出的class值根本不是App-nav-itemselected。

先看你写的类名生成逻辑代码：

const itemClass = tabName => 
    `App-nav-item ${ 
        activeTab === tabName ? 'selected': '' 
    }`;

注意App-nav-item的末尾、${插值起始标记前面，有一个明确的半角空格：

• 当tab处于激活态时，插值返回selected，最终生成的class字符串是App-nav-item selected。按照HTML规范，class属性里用空格分隔的内容是多个独立的类名，也就是说此时li标签同时拥有两个类：基础样式类App-nav-item、激活状态类selected。
• 当tab未激活时，插值返回空字符串，最终生成的class字符串是App-nav-item （末尾多余的空格会被浏览器自动忽略，不影响解析），此时li标签只有基础类App-nav-item。

再对应CSS选择器规则：

.App-nav-item.selected是CSS的交集选择器，作用就是匹配同时带有App-nav-item和selected两个类的元素，刚好和你激活态li的类属性完全对应，所以必须用这个选择器才能命中激活样式。

如果你真的把两个类名中间的空格删掉，最终拼出App-nav-itemselected，那这是一个独立的单一类名，CSS要写.App-nav-itemselected才能匹配，但你当前代码里的空格已经把两个类名分隔开了，自然不会出现你预期的单类名情况。

如果后续写复杂组件时觉得手动拼接类名容易漏空格、产生冗余内容，可以用专门处理类名拼接的工具函数简化逻辑，你当前的简单场景下现有写法只要注意空格位置就可以正常运行。

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