是否可以在没有其他条件的情况下在三元条件下渲染多个元素？

Question

我有以下代码，可让我在多个社交网络上检索用户的个人链接：

<ul className="navbar-nav my-2 my-lg-0">
  {
    settings !== null &&
      <li className="nav-item">
        <a className="nav-link" href={settings.facebook.url}>Facebook</a>
      </li>
  }
  {
    settings !== null &&
      <li className="nav-item">
        <a className="nav-link" href={settings.twitter.url}>Articles</a>
      </li>
  }
</ul>

但是，由于该settings对象是通过对数据库的Ajax调用来检索的，因此这是异步的，我必须确保在显示某些数据之前必须先进行“设置”。

我的问题是，由于以下操作无效：

<ul className="navbar-nav my-2 my-lg-0">
  {
    settings !== null &&
      <li className="nav-item">
        <a className="nav-link" href={settings.facebook.url}>Facebook</a>
      </li>

      <li className="nav-item">
        <a className="nav-link" href={settings.twitter.url}>Articles</a>
      </li>
  }
</ul>

有什么办法可以对多个React元素进行一次验证？

先感谢您

Answer 1

您可以使用数组返回多个元素

<ul className="navbar-nav my-2 my-lg-0">
  {
    settings !== null ?
      [
         <li className="nav-item">
           <a className="nav-link" href={settings.facebook.url}>Facebook</a>
         </li>,
         <li className="nav-item">
           <a className="nav-link" href={settings.twitter.url}>Articles</a>
         </li>
      ]
      :
      null
  }
</ul>

Answer 2

如果条件通过，则返回的元素需要包含在单个元素中，例如<div>or，正如@kunukn建议的那样<React.Fragment>

<ul>
  {
    setting !== null && (
      <React.Fragment>
        <li className="nav-item">
          <a className="nav-link" href={settings.facebook.url}>Facebook</a>
        </li>
        <li className="nav-item">
          <a className="nav-link" href={settings.twitter.url}>Articles</a>
        </li>
      </React.Fragment>
    )
  }
</ul>