javascript - 使用带有 PostCSS 的 React 的 className 属性有条件地在三元组中添加多个类

Question

我将 PostCSS 与 React 结合使用，并希望根据组件的状态添加常规类和修饰符类。简而言之，我想根据搜索输入查询的存在/不存在来执行显示/隐藏切换。不幸的是，使用括号表示法似乎只是以一种无法识别的方式呈现类名。

className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }>

有人遇到过这个问题吗？

import React, { Component } from 'react';
import styles from './SiteSearch.css';

class SiteSearch extends Component {
  constructor(props) {
    super(props);

    this.state = {
      suggestions: [],
      suggestionsAvailable: false
    };
  }

  render() {
    return(
      <form>
        ...
        <div className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }>
         ...
       </div>
      </form>
    );
  }
}

---

.site-search__suggestions {
  display: none;
  position: absolute;
  margin-top: 5px;
  border: 1px solid #e0e3e5;
  height: 240px;
  width: 100%;
  border-radius: 6px;
  background-color: rgba(255,255,255,0.9);
}

.site-search__suggestions--active {
  display: block;
}

Answer 1

<div className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] + " " + styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }>

这是工作所需的，必须连接字符串才能正确显示。

@Carl Edwards 也有一个使用模板文字的 ES2015 解决方案:

${styles['site-search__suggestions']} ${styles['site-search__suggestions--active']}