javascript 我可以在没有其他条件的情况下呈现三进制条件下的多个元素吗？

wecizke3 于 2023-01-04 发布在 Java

关注(0)|答案(2)|浏览(112)

我有下面的代码，允许我检索用户的个人链接在几个社交网络：

<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元素进行一次验证？
先谢谢你

JavaScript

来源：https://stackoverflow.com/questions/48543797/can-i-render-multiple-element-in-a-ternary-condition-without-else

2条答案

按热度按时间

9udxz4iz1#

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

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

赞(0）回复(0）举报 2023-01-04

tkqqtvp12#

条件通过时返回的元素需要 Package 在单个元素中，如<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>

赞(0）回复(0）举报 2023-01-04

我来回答

javascript 我可以在没有其他条件的情况下呈现三进制条件下的多个元素吗？

2条答案

相关问题

热门标签

最新问答