在反应返回语句中使用 && 运算符进行条件渲染答案

【问题标题】：Conditional rendering with && operator within react return statement在反应返回语句中使用 && 运算符进行条件渲染
【发布时间】：2018-10-03 16:53:09
【问题描述】：

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

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>

【问题讨论】：

标签： javascript reactjs

【解决方案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

【讨论】：

【解决方案2】：

可以使用三元运算符：

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

另外，null 是假值，所以你可以写成(!x && !y)。

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

【讨论】：

【解决方案3】：

这是使用三元运算符的方法：{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>

【讨论】：