React多元素动态切换类名疑问：为何无法简化内联写法？

原写法失效的核心原因 #

你用&&拼接类名的逻辑有误：在JavaScript里，A && B的规则是如果A是真值，就返回B；如果A是假值，返回A。而'activecolumn'和'inactivecolumn'都是非空字符串，属于真值，所以不管activeId === 2是真还是假，整个表达式都会返回后面的公共类字符串，状态类activecolumn/inactivecolumn被直接丢弃，自然无法实现状态切换。

几种简洁的内联写法 #

1. 模板字符串拼接（最常用）

用ES6模板字符串把状态类和公共类直接拼接：

<div className={`${activeId === 2 ? 'activecolumn' : 'inactivecolumn'} card middlecolumn mb-10 pt-2 pb-2 pl-2`} id="2" onClick={toggleMiddle.bind(2)}>

2. 数组+join（适合类名较多的场景）

把所有类名放进数组，最后用空格拼接，可读性更强：

<div className={[
  activeId === 2 ? 'activecolumn' : 'inactivecolumn',
  'card',
  'middlecolumn',
  'mb-10',
  'pt-2',
  'pb-2',
  'pl-2'
].join(' ')} id="2" onClick={toggleMiddle.bind(2)}>

3. 公共类前置，条件追加状态类

如果公共类固定，也可以先写公共类，再根据条件追加状态类：

<div className={`card middlecolumn mb-10 pt-2 pb-2 pl-2 ${activeId === 2 ? 'activecolumn' : 'inactivecolumn'}`} id="2" onClick={toggleMiddle.bind(2)}>

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