如何在React组件的jsx和typescript中使用三元运算符?

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

我想做什么?

我有下面的代码,

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

因此,如上所示,如果condition1和condition2为true,则它将呈现firstdiv

现在,如果condition3为true,我必须返回null

所以很容易,如果这样的话,

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

因此,我尝试使用jsx中的三元运算符进行如下操作

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

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

评论
  • Seven
    Seven 回复

    You wrapped your ternary into {} where it's neither allowed nor necessary. Also you can't use the return statement inside of an expression.

    {conditon1 && condition2 && (
        condition3 ? null : (
            <firstdiv>
                <seconddiv>
                    <Icon/>
                </seconddiv>
            </firstdiv>
        )
    )}
    
  • 对不起
    对不起 回复

    您可以这样做:

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

    甚至更简单:

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