在 React 中显示的条件渲染

Question

我想显示徽章/文本，然后满足两个条件。 第一个条件是，如果没有可用的openSopts ，则显示SOLD OUT徽章/文本，如果不满足此条件，则检查它是否在线，然后显示ONLINE的徽章/文本。 但是卡片组件上没有显示徽章/文字，你能告诉我我在做什么错误吗？

Answer 1

返回的 JSX 不包括您的if / else语句中的 JSX。 它必须是返回的 JSX 的一部分才能显示出来。

您可以使用三元表达式来执行此操作（在您的return语句之后将其添加到 JSX，将其放在您希望呈现徽章的任何位置）：

{ props.openSpots === 0 ? <div className="card--badge">SOLD OUT</div> : null }
{ props.openSpots > 0 && props.location === "Online" ? <div className="card--badge">Online</div> : null }

如果你想要一个语句，你可以嵌套它们，但这开始变得难以阅读：

{
   props.openSpots === 0 
      ? <div className="card--badge">SOLD OUT</div> 
      : props.location === "Online" 
         ? <div className="card--badge">Online</div> 
         : null
}

Answer 2

您没有在渲染部分使用 JSX，它只是一个声明。

将 JSX 保存在变量中，如下所示：

let badge = null

if (openSpots === 0) {
badge = ..
} else if (..) {
badge = ..
}

// Use it in code 

...
<div class="card-badge">{badge}</div>

或者使用条件渲染内联

Answer 3

只需将您的代码段分配给一个变量，然后在您想要的任何地方渲染它。😊

...
const badge = openSpots === 0 ? <div className="card--badge">SOLD OUT</div> : <div className="card--badge">Online</div>
...
return (
  <div>
   {badge}
  </div>
);