javascript - 在 className if-else 语法中 react JSX

标签 javascript reactjs syntax jsx classname

<分区>

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

请帮帮我 :)

最佳答案

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

关于javascript - 在 className if-else 语法中 react JSX，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49353936/

上一篇：javascript - 通过 Lodash 对分组的对象进行排序

下一篇：javascript - 使用Drive API/DriveApp将PDF转换为Google文档

javascript - d3 更改单击的节点文本的类

php - addslashes() 是否可以安全地防止 HTML 属性中的 XSS？

php - 服务器端应用程序的 Google+ 登录验证无法正常工作

reactjs - React - 限制文本字段中最大长度的数字/字母数字/十六进制符号

javascript - onRowDoubleClicked 不应触发 primereact 中的 onSelectionChange

mongodb - mongo点符号歧义

javascript - 如何在MarkLogic中获取两个xs.date的天数差异？

javascript - 有没有办法为这 3 个事件设置一个事件处理程序？

javascript - 如何在 JavaScript 中连接正则表达式文字？