在 className if-else 语法中反应 JSX [重复]答案

【问题标题】：React JSX in className if-else syntax [duplicate]在 className if-else 语法中反应 JSX [重复]
【发布时间】：2024-05-29 16:40:01
【问题描述】：

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

请帮帮我:)

【问题讨论】：

欢迎使用 *！ :)

标签： javascript reactjs syntax jsx classname

【解决方案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) }>

【讨论】：

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

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

您可以采用的一种方法是在您的 JSX 外部处理此问题。所以，在你的渲染函数中，但就在你返回的地方。

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

【讨论】：