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>

但是，由于通过对数据库的Ajax调用检索settings对象，这是异步的，我必须确保在设置显示某些数据之前存在`设置。

我的问题是，因为以下内容不起作用：

<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>或@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>

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

2 个答案: