【问题标题】：How to use ternary operator within the jsx of a react component along with typescript?如何在反应组件的 jsx 中使用三元运算符以及打字稿？
【发布时间】：2020-08-27 02:56:10
【问题描述】：

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

我想做什么？

我有如下代码，

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

如上所示，如果condition1 和condition2 是true，那么它会呈现firstdiv。

如果condition3 是true，现在我必须返回null。

所以在简单的 if 和 else 这样的事情中，

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

为此，我在 jsx 中使用三元运算符尝试了类似下面的操作

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

但这似乎不是正确的语法。有人可以帮我解决这个问题吗？谢谢。

【问题讨论】：

condition3 评估为什么以及为什么需要返回 null？

标签： javascript reactjs typescript

【解决方案1】：

你可以这样做：

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

甚至更简单：

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

【讨论】：

这可行，但如果condition3 是true，它不会返回null。
好吧，如果condition3 是true，它不会返回任何东西，这必须被认为等同于null？
如果 condition3 是任何计算结果为 true 的东西，它将返回 false (!true)，这不是什么都没有。但是，对于 true、false、null 或 undefined 的任何元素，React 都不会呈现任何内容，这可能并不重要。

【解决方案2】：

您将您的三元组包装到{} 中，既不允许也没有必要。此外，您不能在表达式中使用 return 语句。

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

【讨论】：

【解决方案3】：

首先你的逻辑可以更简单：

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

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

【讨论】：

看起来您缺少一些 () 来启动 JSX 上下文。添加render() 和return 可能会有所帮助，因为我认为这就是您的想象

【解决方案4】：

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

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

如果您不熟悉该术语，表达式是any unit of code that can be evaluated to a value is an expression。想想任何可以让你输入 REPL 并查看价值的东西。

为什么你的尝试成功或失败

所以你的第一个声明表格有效，

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

这行得通；这是一个表达式。

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

没用！不是表情。不过，您可以使用它在 render() 函数的开头设置一个变量，然后再渲染该变量。

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

这几乎是一个表达，但不完全是。为什么condition3旁边有一个{？您已经处于 Javascript 评估模式，因此从技术上讲，这会启动一个代码块。但是代码块不能成为表达式的一部分，所以这不再是表达式，因此不会起作用。

解决方案

没有三元

你可以使用相同的形式而无需像这样的三元组

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

但实际上没有理由在 JSX 中显式返回 null（为什么？它不会被渲染），所以这可以简化为：

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

三元

话虽如此，我们仍然可以将三进制用于condition3。

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

【讨论】：

在 Javascript 中（在 JSX 文件中），() 开始 JSX 评估。这不是真的。 <AnIdentifier 开始 jsx 评估。这是有效的：const aParagraph = <p>foo</p>;。 () 可以包装任何表达式，与jsx 无关。它可以例如用作grouping operator。您也可以在 jsx 中使用 {condition1 && condition2 && <p>some JSX<p>} 而不使用 ()。
@trixn 这是真的

【解决方案5】：

把你的条件放在花括号里，因为你使用 JSX，里面的花括号，想想你在你的三元运算符中有 3 个参数，条件后面跟一个问号，代表 IF 是 JS，第二个和第三个将如果真或假由一个冒号分隔，则执行，这看起来很有趣 { ( 条件 1 && 条件 2 ) ?第一个div：空}

【讨论】：