在 React 中显示的条件渲染答案

【问题标题】：conditional rendering to display in React在 React 中显示的条件渲染
【发布时间】：2022-06-30 22:58:56
【问题描述】：

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

【问题讨论】：

请将代码作为文本而不是图像。另外，需要使用<div> JSX 元素，像if(true){<div />} 这样的语句实际上并没有做任何事情，它与if(true){1} 相同，必须将值分配给某物或以某种方式使用。跨度>
您也可以使用helper function 或三元语法进行渲染，如{props.openSpots === 0 ? <div className="card--badge"> SOLD OUT </div> : <div className="card--badge"> online </div> }

标签： javascript reactjs

【解决方案1】：

返回的 JSX 不包括 if/else 语句中的 JSX。它必须是返回的 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 }

【讨论】：

【解决方案2】：

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

要么像这样将 JSX 保存在变量中：

let badge = null

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

// Use it in code 

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

或者使用条件渲染内联

【讨论】：