在 className if-else 语法中 React JSX

Question

我目前正在开发一个反应应用程序，我根据某些状态变化添加和更改类。它在使用三元运算符进行测试时成功，但现在我意识到我必须添加多个 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';
                        }
                    )}>

请帮助我:)

Answer 1

您只能在 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'
  }
}

你的反应组件将如下所示：

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