Question

当我的条件使用&&运算符时，如何在类组件中构造return语句：

if (x === null && y === null)

...然后显示此html：

<div className="col-12">
    <SomeComponent />
</div>

否则显示此html：

   <div className="col-6">
        <SomeOtherComponent />
   </div>
   <div className="col-6">
        <SomeOtherComponent />
   </div>

我需要将它放在return语句中，因为我将整个条件包装在<main><div className="row></div></main>包装器中，如下所示：

<main>
  <div className="row">
    // show the above mentioned html conditionally
  </div>
</main>

Answer 1

您应该使用简写if语句<condition> ? <if true> : <if false>。您的退货声明应如下所示。

 return (
    <main>
      {x === null && y === null ? (
        <div className="row">
          <div className="col-12">
            <SomeComponent />
          </div>
        </div>
      ) : (
        <div className="row">
          <div className="col-6">
            <SomeOtherComponent />
          </div>
          <div className="col-6">
            <SomeOtherComponent />
          </div>
        </div>
      )}
    </main>
  );

codesandbox with working example

Answer 2

这是使用三元运算符的方法：{condition ? (if condition is true ) : (if condition is false)}

    <main>
      <div className="row">
          {x === null && y === null ? (
<div className="col-12">
    <SomeComponent />
</div>):  (<div className="col-6">
        <SomeOtherComponent />
   </div>
   <div className="col-6">
        <SomeOtherComponent />
   </div>)}
     </div>
    </main>

Answer 3

您可以使用三元运算符：

(x === null && y === null) ? (render if true) : (render this if false)

此外，null是伪造的值，因此您可以编写(!x && !y)。

如果要使用ifs进行编写，请调用this.renderComponent()之类的方法并在那里解析所有内容，然后只返回值或整个组件。

在React Return语句中使用&&运算符进行条件渲染

3 个答案: