从Vue迁移至React：如何为元素添加多个条件类？

对应你Vue里的代码逻辑，React里有几种常用的实现方式：

1. 模板字符串（正确写法） #

你之前用模板字符串没成功，大概率是语法细节没处理好。可以这样写：

<ul>
  {Menus.map(m => (
    <li 
      key={m.id} // React列表必须加唯一key
      onClick={() => moveMenu(m)}
      className={`primaryClass ${selectedMenu(m) ? 'ur-primay__selected' : ''}`}
    >
      {m.name}
    </li>
  ))}
</ul>

注：如果selectedMenu(m)返回false，会多出一个空格，但浏览器会自动忽略，不影响样式。

2. 数组拼接法 #

把类名放到数组里，过滤掉空值后转成字符串，避免多余空格：

<ul>
  {Menus.map(m => {
    const classes = [
      'primaryClass',
      selectedMenu(m) && 'ur-primay__selected'
    ].filter(Boolean); // 过滤掉false、undefined等无效值
    return (
      <li 
        key={m.id}
        onClick={() => moveMenu(m)}
        className={classes.join(' ')}
      >
        {m.name}
      </li>
    )
  })}
</ul>

这种方式逻辑更清晰，适合类名较多的场景。

3. 使用工具类（可选） #

如果项目里频繁处理条件类，可以用classnames工具库（npm直接安装），写法更简洁：

import classNames from 'classnames';

// ...

<ul>
  {Menus.map(m => (
    <li 
      key={m.id}
      onClick={() => moveMenu(m)}
      className={classNames('primaryClass', {
        'ur-primay__selected': selectedMenu(m)
      })}
    >
      {m.name}
    </li>
  ))}
</ul>

这个库会自动处理空值和空格，省心高效。

另外要注意：React遍历列表时，必须给每个子元素添加唯一的key属性，这是React的强制要求。

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