React & Next js:如果 prop 包含值,则只渲染 div
React & Next js: Only render div if prop contains value
我正在使用我的应用程序,但遇到了一个问题。
我有一些来自 contentful 的数据,我将这些数据作为 props 传递给我的组件。有一条数据,如果它包含任何值,我只想呈现它。
这在一定程度上起作用,但是,背景仍然显示。
<div className="text-white font-base text-xs text-center p-1.5 bg-black">
{`${mrr ? mrr : ""}`}
</div>
picture of the frontend
picture of the frontend 2
如果有人能提供帮助,那就太好了。
试试这个代码。
{mrr && (
<div className="text-white font-base text-xs text-center p-1.5 bg-black">
{mrr}
</div>
)}
@famouslastwords
TopW3 的回答是正确的。我将尝试解释代码。
下面的文字只有当mrr为真时才会被渲染。它与执行以下代码相同:
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>
)}
我正在使用我的应用程序,但遇到了一个问题。
我有一些来自 contentful 的数据,我将这些数据作为 props 传递给我的组件。有一条数据,如果它包含任何值,我只想呈现它。
这在一定程度上起作用,但是,背景仍然显示。
<div className="text-white font-base text-xs text-center p-1.5 bg-black">
{`${mrr ? mrr : ""}`}
</div>
picture of the frontend
picture of the frontend 2
如果有人能提供帮助,那就太好了。
试试这个代码。
{mrr && (
<div className="text-white font-base text-xs text-center p-1.5 bg-black">
{mrr}
</div>
)}
@famouslastwords TopW3 的回答是正确的。我将尝试解释代码。
下面的文字只有当mrr为真时才会被渲染。它与执行以下代码相同:
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>
)}