Javascript 短路评估-反应

在功能部件（带挂钩）中使用短路评估：

---

这会引发语法错误。

我认为错误是由于返回了两个react元素。试着把它包装成碎片

{options.length > 0 && (
  <>
    <div className="col-md-3">
      <CustomComponent />
    </div>
    <div className="col-md-3">
      <SecondComponent />
    </div>
  </>
)}

{options.length>0&&(
)}

我认为错误是由于返回了两个react元素。试着把它包装成碎片

{options.length > 0 && (
  <>
    <div className="col-md-3">
      <CustomComponent />
    </div>
    <div className="col-md-3">
      <SecondComponent />
    </div>
  </>
)}

{options.length>0&&(
)}

您应该将元素包装在中。原因是，React元素是通过单个根节点元素呈现的。将其包装成片段将允许您在不添加额外节点的情况下对元素进行分组

return (
  <div className="row">
    {options.length > 0 && (
      <>
      <div className="col-md-3">
        <CustomComponent />
      </div>
      <div className="col-md-3">
        <SecondComponent />
      </div>
    </>
  )}
  </div>
)

返回(
{options.length>0&&(
)}
)

您应该将元素包装在中。原因是，React元素是通过单个根节点元素呈现的。将其包装成片段将允许您在不添加额外节点的情况下对元素进行分组

return (
  <div className="row">
    {options.length > 0 && (
      <>
      <div className="col-md-3">
        <CustomComponent />
      </div>
      <div className="col-md-3">
        <SecondComponent />
      </div>
    </>
  )}
  </div>
)

返回(
{options.length>0&&(
)}
)

将元素包装成一个片段或

。将元素包装成一个片段或

。好把戏！根本没有想到碎片。此外，我无法将内联if放在

return之后（

，这是因为组件中只有一个根节点元素？它应该可以正常工作。是因为您删除了父div吗？您介意在您的问题上发布更新的代码吗？@AlexanderKim啊，是的，您不应该删除包装它的父div。很好的技巧！根本没有考虑到片段。而且我也无法放入inline如果在

返回（

之后，这是因为组件中只有一个根节点元素？它应该可以正常工作。是因为您删除了父div吗？您介意在您的问题上发布更新的代码吗？@AlexanderKim啊，是的，您不应该删除包装它的父div。

return (
  <div className="row">
    {options.length > 0 && (
      <>
      <div className="col-md-3">
        <CustomComponent />
      </div>
      <div className="col-md-3">
        <SecondComponent />
      </div>
    </>
  )}
  </div>
)