ReactJs 中的条件渲染，用于 Html 中的一部分

Question

只有当变量之一为真时，我才想渲染 Html 的某些部分。 我已经看到可以返回整个元素的示例，但我只想要 html 的一部分的 if 条件。 如果其中一个变量为真，我只想用 10 行显示，但通常使用 500 行的 html。 我可以这样做作为回报 function 吗？

const getCustomers= (props) => {
useEffect(() =>{ do something...});

 return (
<>
if(test === true){
<div> 10 lines</div>
else
{
do not show this div
}
}

<div> 500 lines</div> // Common
</>

)
};

Answer 1

仅使用三元运算符和逻辑与运算符支持条件渲染：

{
  something ? '10 lines' : '500 lines'
}

{
  something && '10 lines' || '500 lines'
}

if-else语句在 JSX 中不起作用。 这是因为 JSX 只是 function 调用和 object 构造的语法糖。

有关更多详细信息，您可以阅读此内容和文档

Answer 2

尽量避免返回语句中的逻辑。

您可以将条件 output 分配给 JSX 值，并始终呈现它。

const Customers = () => {

  const optionalDiv = test === true && <div>10 lines</div>;

  return (
    <>
      {optionalDiv}
      <div>500 lines</div>
    </>
  );
};

Answer 3

您可以使用条件（三元）运算符

return (
 <>
  { test === true ? (<div> 10 lines</div>) : null }
  <div> 500 lines</div>
 </>

)

Answer 4

我认为只是这样做就应该这样做-

return (
    <>
        {test? <div> 10 lines</div> : null}
        <div> 500 lines which are common</div> 
    </>
);