react.js动态样式写法

1、在开发过程中，我们常常需要动态去条件控制不同样式的展示。在这里分享我的两种方法：

三元运算符

这种方法也很常见

   const isFull = fullText ? '-fullText' : '-lessText';

  <div className={styles[`text${isFull}`]} onClick={e => this.goDynamicsDetails(e)}>
   {item.content}
</div>

借助classNames库

一个可以让我们更灵活使用类的npm库

• npm install classnames --save
• import classNames from 'classnames';
• 使用案例：
  （条件控制按钮是否有点击样式）

// 定义的方法---------------------------
  getIsActive = (array, classId, gradeEnum) => {
    const isActive = ((array || []).findIndex(value => value.classId === classId && value.gradeEnum === gradeEnum)) === -1
      ? 'Active'
      : '';
    return isActive
  }

  render() {
      
    const isAllActive = this.getIsActive(selectedClassList, -1, gradeEnum);
    return (
      <Flex wrap="wrap">
      //-------------------------使用 当isAllActive > -1条件为true的时候执行类名样式,
      // --也就是后面是条件 为true的时候执行 
        <div
          className={classNames(styles.classCheckbox, {
            [`${styles.active}`]: isAllActive > -1
          })}
          onClick={this.onClassCheck.bind(this, -1)}
        >
          全部
        </div>
        {(rowData || []).map((item) => {
          const isActive = this.getIsActive(selectedClassList, item.classId, gradeEnum);
          // ---------------------------
          return (
            <div
              key={item.classId}
              className={classNames(styles.classCheckbox, {
                [`${styles.active}`]: isActive > -1
              })}
              onClick={this.onClassCheck.bind(this, item.classId, item.className)}
            >
              {item.className}
            </div>
          )
        })}
      </Flex>
    )
  }
}

.classCheckbox {
  display: inline-block;
  font-size: 13px;
  color: #537eda;
  margin-right: 12px;
  padding: 4px 16px;
  border: 1px solid #537eda;
  border-radius: 4px;
  margin-bottom: 10px;
}

.active {
  background-color: #537eda;
  color: white;
}