使用 React 的 className 属性和 PostCSS 有条件地在三元组中添加多个类答案

【问题标题】：Conditionally adding multiple classes in a ternary using React's className attribute with PostCSS使用 React 的 className 属性和 PostCSS 有条件地在三元组中添加多个类
【发布时间】：2017-03-01 13:40:33
【问题描述】：

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

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;
}

【问题讨论】：

<div className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] : styles['site-search__suggestions'] }> 这条线有效吗？（即只应用一种样式）
是的，但请查看我的修饰符类是如何设置的。按照您描述的方式进行操作需要我从基类中复制所有样式。
如果它只适用于我的示例中的一种风格，那么这可能会奏效：<div className={ this.state.suggestionsAvailable ? styles['site-search__suggestions'] + " " + styles['site-search__suggestions--active'] : styles['site-search__suggestions'] }> 告诉我它是否有效，我将把它作为答案。当它解析你的解决方案时，我认为它不知道当这样的样式之间有空格时该怎么做
是的，这行得通！你启发了我更进一步，发现这也可以使用 ES2015 模板文字来完成：${styles['site-search__suggestions'] styles['site-search__suggestions--active']}。尽管如此，这两种解决方案都是合理的。

标签： javascript css reactjs ternary-operator postcss

【解决方案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']}

【讨论】：

感谢好友的帮助。
对模板文字的附加说明。我必须将每个类单独括在自己的一组括号中才能起作用：${styles['site-search__suggestions']} ${styles['site-search__suggestions--active']}

【解决方案2】：

你可以使用 .join(' ').

要连接多个子串，需要array[ ]。

<div className={ this.state.suggestionsAvailable ? [styles['site-search__suggestions'],styles['site-search__suggestions--active']].join(' ') : styles['site-search__suggestions'] }>

【讨论】：

【解决方案3】：

您也可以使用 Object.assign 将多个对象组合成一个新对象

Object.assign{{},styles['site-search__suggestions'],styles['site-search__suggestions--active'] }

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

【讨论】：