在 className if-else 语法中反应 JSX

Question

我目前正在开发一个 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';
                        }
                    )}>

请帮帮我:)

Answer 1

您可以采用的一种方法是在您的 JSX 外部处理此问题。因此，在您的渲染函数中，仍然在 return.

的上方

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

Answer 2

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

Answer 3

If 和 else 语句，就是...语句。用 {…} 包裹的内联 JSX 表达式只允许 expressions；语句不是表达式。

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

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

Answer 4

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

在 className if-else 语法中反应 JSX

React JSX in className if-else syntax

javascript

syntax

classname

jsx

reactjs