Javascript React js：根据条件更改css类

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

这是我的密码

我得到

徽标。长度
为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>


一些数据


一些数据


某些数据
如果使用字符串文字（$），则应将“替换为”`


一些数据
只是一个使用建议-这是一个非常简单但有效的工具，用于连接类名或按条件设置
有一个很好的管理类的软件包，请检查这里：

它很容易使用，就像

首先，您必须安装，然后像

import classNames from 'classnames'

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

从“classNames”导入类名

将应用类“宽度15%”您的条件为真

或者，如果你不想使用这个软件包，那么像

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

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

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()}>
  )
}

getClassName（）{
让宽度=零；
开关（this.state.logos.length）{
案例2：
宽度=20
打破
案例3：
宽度=15；
打破
违约：
宽度=50；
打破
};
返回'width\${width}'u percent'；
}
render（）{
返回(
)
}
那$character是干什么用的？试着删除它。我觉得你的条件还可以。@SergeK..但它仍然不起作用。如果我删除$s，那么我会在浏览器控制台中获得完整的语法我确定你正在返回数据--return（…）.错误是怎么说的？同样，你的等式符号应该是===不==，只是一个反应建议，虽然什么不起作用，它在我的系统上起作用，我检查了你一定有一些错误，在编译时，它总是取最后一个条件。因为我有3个徽标，所以第一个条件应该执行。但它总是取第三个条件，我s width_50_%n那么您的问题是this.state.logos，该值没有正确输入，因为它在我的机器上工作正常检查this.state.logos中返回的内容
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()}>
  )
}