Javascript 在className if else语法中反应JSX

我目前正在开发一个react应用程序，根据某些状态变化添加和更改类。它在使用三元运算符进行测试时成功运行，但现在我意识到我必须添加多个else-if语句，因此我尝试将其转换为经典的if-else格式，但遇到语法错误，我不确定如何执行

下面是三元运算符，它工作得很好：-

<div className={"wrapper " + (this.state.hot ? 'wrapper-gradient-hot' : 'wrapper-gradient-cold')}>

以下是我试图使其成为JSX中的经典if-else，但失败了：-

<div className={"wrapper " + (
                        if (this.state.hot) {
                            return 'wrapper-gradient-hot';
                        } else {
                            return 'wrapper-gradient-cold';
                        }
                    )}>

---

请帮助我：）

你可以采取的一种方法是在你的JSX之外处理这个。因此，在渲染函数中，仍然在返回的位置上方

render() {
  let gradientValue;
  // Put your if-else here and update gradientValue on each condition.
  return (
    <h1 className=`wrapper ${gradientValue}`>Your html here</h1>
  );
}

render（）{
让梯度值；
//将if-else放在这里，并在每个条件下更新gradientValue。
返回(
你的html在这里
);
}

return

只从函数内部返回值，只是在if/else语句周围加上括号是行不通的。最好还是坚持使用三元运算符，并根据需要嵌套它们。

If和else语句，只是语句。用

{…}

包装的内联JSX表达式只允许表达式；语句不是表达式

您的三元方法很好，但由于两个字符串之间有一些共同点，您可以实际使用插值：

<div className={`wrapper-gradient-${this.state.hot ? 'hot' : 'cold'}`}>

---

只能在React组件属性内使用表达式。您需要将逻辑移到函数中

function temperatureClassname(temp){
  const prefix = 'wrapper-gradient-'

  switch (temp) {
    case 'hot':      return prefix + 'hot'
    case 'cold':     return prefix + 'cold'
    case 'ice-cold': return prefix + 'too-cool'
  }
}

您的react组件如下所示：

<div className={ temperatureClassname(this.state.hot) }>

欢迎使用StackOverflow！：）谢谢，你的建议正是我需要的哈哈。我几乎从不使用switch语句，但在这里它非常完美。谢谢：）很高兴我能帮忙。干杯=）