如何在三元运算符中引用CSS Module的.cell.black和.cell.white类？

问题场景 #

现有React组件中的div结构：

<div className={
   `${style.cell} 
      ${cell === Player.Black ? "black" : cell === Player.White ? "white" : ""}`}key={colIndex}/>

对应的CSS Module文件（Game.module.css）代码：

.cell {
  width: 30px;
  height: 30px;
  border: 1px solid #000;
  background-color: burlywood;
  cursor: pointer;
}
  
.black {
  background-color: #000;
  color: white;
  text-align: center;
  font-weight: bolder;
}
  
.white {
  background-color: #fff;
  color: black;
  text-align: center;
  font-weight: bolder;
}

已经通过import style from './Game.module.css'引入CSS Module，需要替换掉直接写"black""white"的部分，改用style.xxx的方式引用模块化后的类名，实现和非模块化环境类似的条件类名拼接效果。

解决方案 #

1. 模板字符串直接替换 #

直接把字符串"black""white"换成style.black和style.white就行，空值情况留空或者用逻辑短路优化：

<div 
  className={`${style.cell} ${cell === Player.Black ? style.black : cell === Player.White ? style.white : ''}`}
  key={colIndex}
/>

怕空字符串产生多余空格？用&&优化：

<div 
  className={`${style.cell} ${cell === Player.Black && style.black} ${cell === Player.White && style.white}`}
  key={colIndex}
/>

2. 数组过滤拼接（更清爽） #

把要加的类名放进数组，过滤掉空值后用空格拼接，自动处理多余空格：

<div 
  className={[
    style.cell,
    cell === Player.Black ? style.black : null,
    cell === Player.White ? style.white : null
  ].filter(Boolean).join(' ')}
  key={colIndex}
/>

3. 类名工具库简化（可选） #

如果项目里有clsx或classnames库，写法更简洁：

// 先安装：npm install clsx
import clsx from 'clsx';

<div 
  className={clsx(style.cell, {
    [style.black]: cell === Player.Black,
    [style.white]: cell === Player.White
  })}
  key={colIndex}
/>

这种方式逻辑一目了然，多条件类名场景尤其好用。

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