Javascript 如何在react组件的jsx中与typescript一起使用三元运算符？

如果条件满足，我想返回null；如果条件不满足，我想在react和typescript中使用三元运算符渲染组件

我想做什么

我有如下代码

{condition1 && condition2 && (
    <firstdiv>
      <seconddiv>
        <Icon />
      </seconddiv>
    </firstdiv>
  )}

为了做到这一点，我在jsx中用三元运算符尝试了下面的方法

{conditon1 && condition2 && (
    {condition3 ? return null : (
    <firstdiv>
      <seconddiv>
        <Icon/>
      </seconddiv>
    </firstdiv>)
  })}

{conditon1&&condition2&&(
{condition3？返回空值：(
)
})}

但这似乎不是正确的语法。有人能帮我修一下吗？谢谢。

您可以这样做：

{conditon1 && condition2 && (
    {!condition3 && (
    <firstdiv>
      <seconddiv>
        <Icon/>
      </seconddiv>
    </firstdiv>)
  })}

{conditon1&&condition2&&(
{！条件3&&(
)
})}

或者更简单：

{
  conditon1 && condition2 && !condition3 && (
    <firstdiv>
      <seconddiv>
        <Icon />
      </seconddiv>
    </firstdiv>
  );
}

{
条件1&&condition2&&condition3&&(
);
}

您将三元组包装到了既不允许也不必要的

{}

中。 此外，不能在表达式中使用

return

语句

{conditon1 && condition2 && (
    condition3 ? null : (
        <firstdiv>
            <seconddiv>
                <Icon/>
            </seconddiv>
        </firstdiv>
    )
)}

if (condition1 && condition2) {
    if (condition3) { 
        return null;
    } else {
        return firstdiv;
    }
}

{conditon1&&condition2&&(
条件3？空：(
)
)}

首先，您的逻辑可以更简单，如下所示：

if (condition1 && conditions && !condition3) {
 return firstdiv;
} else {
 return null;
}

{conditon1 && condition2 && !condition3 ? <firstdiv>
      <seconddiv>
        <Icon/>
      </seconddiv>
    </firstdiv> : null }

if（条件1&&conditions&&conditions&&3）{
返回firstdiv；
}否则{
返回null；
}
{条件1&&condition2&&condition3？
：null}

其他答案是正确的，但无法解释原因

在JSX中，{}大括号必须包含Javascript表达式

如果你不熟悉这个术语，有一个表达是。 想一想任何你可以输入REPL并看到它的值的东西

为什么你的尝试成功或失败 所以你的第一份陈述表有效

{
  condition1 && condition2 && (<p>some JSX<p>)
}

不行！不是表情。不过，您可以使用它在

render（）

函数的开头设置一个变量，然后再渲染该变量

{conditon1 && condition2 && (
    {condition3 ? return null : (
    <firstdiv>
      <seconddiv>
        <Icon/>
      </seconddiv>
    </firstdiv>)
  })}

但事实上，没有理由在JSX中显式返回null（为什么？它不会被呈现），因此可以简化为：

{
  condition1 
  && condition2 
  && !condition3
  && (<p>firstdiv<p>)
}

---

把你的条件放在大括号里，因为你使用的是JSX，里面是curcly大括号，假设你的三元运算符中有3个参数，条件后面有一个问号，表示IF是JS，第二个和第三个将是execution IF true或false，用冒号隔开， 这张照片看起来像什么

---

{（条件1和条件2）？firstdiv:null}

条件3的计算结果是什么，以及为什么需要返回

null

？这是可行的，但如果

condition3

为

true

，它将不会返回

null

。如果

condition3

为

true

，它将不会返回任何内容，必须将其视为等同于

null

？如果

condition3

的值为

true

，则它将返回

false

（

！true

），这不是什么。但是，对于

true

、

false

、

null

或

未定义的
元素，react不会呈现任何内容，这可能无关紧要。看起来您缺少了一些启动JSX上下文的
（）
。添加
render（）
和
return
可能会有所帮助，因为我认为这就是在Javascript（JSX文件中）中描述它的方式，（）开始JSX评估。事实并非如此<代码>。您也可以在
JSX
的内部执行
{condition1&&condition2&&一些JSX}
，而不使用
（）
@trixn这是正确的
{
  (
    condition1 
    && condition2 
    && !condition3
    && (<p>firstdiv<p>)
  ) || null
}

{
  condition1 
  && condition2 
  && !condition3
  && (<p>firstdiv<p>)
}

{
  conditon1 
  && condition2 
  && (
    //{ problem was here. You're already in a Javascript context!
    //  { would start a code block here, which you can't do in an expression
    condition3 
    ? return null 
    : (
      <firstdiv>
        <seconddiv>
         <Icon/>
        </seconddiv>
      </firstdiv>
    )
  )
}