Question

我想根据特定条件给div一个css类。它总是需要最后的条件。

这是我的代码。

我得到logos.length为3

<div className= "${ (this.state.logos && (this.state.logos.length == 3)) ? 'width_15_percent' : (this.state.logos && (this.state.logos.length == 2)) ? 'width_20_percent' : 'width_50_percent' } ">

some data

</div>

任何帮助都会很棒。

谢谢。

Answer 1

< div className = {
    (this.state.logos && (this.state.logos.length === 3)) ? 'width_15_percent' :
      (this.state.logos && (this.state.logos.length === 2)) ? 'width_20_percent' : 'width_50_percent'
  } >
  some data < /div>

Answer 2

此处不需要引号和$符号。直接传递你的表达。

<div className={ (this.state.logos && (this.state.logos.length == 3)) ? 'width_15_percent' : (this.state.logos && (this.state.logos.length == 2)) ? 'width_20_percent' : 'width_50_percent' }>

some data

</div>

Answer 3

<div className={ (this.state.logos && (this.state.logos.length == 3)) ? 'width_15_percent' : (this.state.logos && (this.state.logos.length == 2)) ? 'width_20_percent' : 'width_50_percent' }>

some data

</div>

Answer 4

如果您使用String Literal（$），那么您应该替换＆＃34;用`

<div className= `${ (this.state.logos && (this.state.logos.length == 
3)) ? 'width_15_percent' : (this.state.logos && 
(this.state.logos.length == 2)) ? 'width_20_percent' : 
'width_50_percent' }`>

some data

</div>

Answer 5

只是建议使用classnames - 这是一个非常简单但有效的工具来加入类名或按条件设置

Answer 6

有一个很好的管理类包，请点击此处：https://www.npmjs.com/package/classnames/

它很容易使用，如

首先，您必须安装然后导入

import classNames from 'classnames'

<div className={classNames('yourClassName', { width_15_percent: this.state.logos.length == 3})}>

将应用class＆＃34; width_15_percent＆＃34;你的情况是真的

或者如果你不想使用包，那么就像

一样

<div className={`yourClassName ${(this.state.logos.length == 3) ? 'width_15_percent' : '' }`}>

Answer 7

为了便于阅读，创建一个只返回正确类而不是编写所有这些双三元运算符的方法。你可以这样做：

getClassName() {
  let width = null;

  switch (this.state.logos.length) {
    case 2:
      width = 20
      break;
    case 3:
      width = 15;
      break;
    default:
      width = 50;
      break;
  };

  return `width_${width}_percent`;
}

render() {
  return (
    <div className={this.getClassName()}>
  )
}

React js：根据条件更改css类

7 个答案: