React & Next js：仅当 prop 包含值时才渲染 div

Question

我正在通过我的应用程序工作，但我被卡住了一个问题。

我有一些数据从内容，我传递作为道具到我的组件。有一段数据，我只想在它包含任何值的情况下渲染。

这部作品在一定程度上，然而，背景仍然显示。

<div className="text-white font-base text-xs text-center p-1.5 bg-black">
{`${mrr ? mrr : ""}`}
</div>

前端图片

前端图片2

如果有人能帮忙的话，那就太好了。

Answer 1

@famouslastwordsTopW3的答案是正确的。我将试着解释这些代码。

只有当mrr为true时，下面的文本才会呈现。它与执行下面的代码相同:

const result = true && anything; // result = anything

或

const result = false && anything // result = false
{mrr && (
<div className="text-white font-base text-xs text-center p-1.5 bg-black">
{mrr}
</div>
)}

Answer 2

试试这段代码。

{mrr && (
<div className="text-white font-base text-xs text-center p-1.5 bg-black">
{mrr}
</div>
)}