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

Posted 2023-02-21

【中文标题】在 className if-else 语法中反应 JSX [重复]

【英文标题】：React JSX in className if-else syntax [duplicate]

【发布时间】：2018-08-27 11:31:21

【问题描述】：

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

请帮帮我:)

【问题讨论】：

欢迎使用 ***！ :)

【参考方案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>
  );