React & Next js：如果 prop 包含值，则只渲染 div

Question

我正在使用我的应用程序，但遇到了一个问题。

我有一些来自 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

如果有人能提供帮助，那就太好了。

Answer 1

试试这个代码。

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

Answer 2

@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>
)}

React & Next js：如果 prop 包含值，则只渲染 div

React & Next js: Only render div if prop contains value

javascript

reactjs

next.js

conditional-statements

rendering