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

if和else语句只是...... 语句。使用{…}打包的内联JSX表达式只允许表达式;陈述不是表达。

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

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

Answer 2

您只能在React Component属性中使用表达式。您需要将逻辑转换为函数。

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) }>

Answer 3

您可以采用的一种方法是处理JSX的外部。所以，在你的渲染功能中仍然只是你返回的地方。

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

Answer 4

return只返回函数内部的值，只是将括号括在if / else语句周围，就好不能正常工作。你最好坚持使用三元运算符，并根据需要嵌套它们。

在className if-else语法中反应JSX

4 个答案: