在 JSX 中有条件输出 ul 标签？

Question

设置：无头WordPress CM，gatsbyjs，GraphQl

我认为这是一个JavaScript ES6问题，而不是gatsbyjs问题。

我有一个查询，可以输出作者，标题和URL。 数据是从ACF中继器字段查询的，因此可能有一个，没有一个或多个项目。

这是代码：

  {citationPath &&
    citationPath.map(item => {
      return (
        <li key={item.url}>
          <a href={item.url} target="_blank" rel="noopener noreferrer">
            {item.title}
          </a>
          <p>Author: {item.author}</p>
        </li>
      )
    })}
    

这有效，没问题。

我现在想在代码之前放置一个＆lt; ul＆gt;标记，然后仅当某些citation> citation> citation> citation> >项目 退还。

选项＃1

我可以做到这一点：

  {citationPath &&
    citationPath.map(item => {
      return (
        <ul>
            <li key={item.url}>
            <a href={item.url} target="_blank" rel="noopener noreferrer">
                {item.title}
            </a>
            <p>Author: {item.author}</p>
            </li>
        </ul>
        )
    })}

但是然后我得到了每个列表项目周围的＆lt; ul＆gt;/ul＆gt;。

选项＃2

我可以做到这一点：

<ul>
  {citationPath &&
    citationPath.map(item => {
      return (
        
            <li key={item.url}>
            <a href={item.url} target="_blank" rel="noopener noreferrer">
                {item.title}
            </a>
            <p>Author: {item.author}</p>
            </li>
        
        )
    })}
</ul>

但是，当没有citationpath返回项目时，我会得到＆lt; ul＆gt;/ul＆gt;。

当我尝试此操作时，选项＃3

：

  {citationPath && parse("<ul>")}
  {citationPath &&
    citationPath.map(item => {
      return (
        <li key={item.url}>
          <a href={item.url} target="_blank" rel="noopener noreferrer">
            {item.title}
          </a>
          <p>Author: {item.author}</p>
        </li>
      )
    })}
  {citationPath && parse("</ul>")}

在那些不返回citationpath数据的帖子上没有打印HTML。但是，在那些我会得到以下HTML输出的情况下：

<ul></ul>
<li>
    <a href=[my url] target="_blank" rel="noopener noreferrer">
<li>
[more list items ...]

因此，看来{CitationPath＆amp;＆amp; parse（“＆lt; ul＆gt;”）} and {citationpath＆amp;＆amp;＆amp; parse（“＆lt;/ul＆gt;“）}在以下之前执行：

  {citationPath &&
    citationPath.map(item => {
      return (
        <li key={item.url}>
          <a href={item.url} target="_blank" rel="noopener noreferrer">
            {item.title}
          </a>
          <p>Author: {item.author}</p>
        </li>
      )
    })}
    

注意：我不简单地选择选项＃2的原因是我不希望屏幕读取器撞到空＆lt中; ul＆gt;＆lt;/ul＆gt;标签。

有人对如何解决这个问题有任何想法吗？

Answer 1

您只需要将条件放在上面，并确保检查长度的状况即可。

{citationPath && citationPath.length > 0 && (
  <ul>
    {citationPath.map(item => {
      return (
        <li key={item.url}>
          <a href={item.url} target="_blank" rel="noopener noreferrer">
            {item.title}
          </a>
          <p>Author: {item.author}</p>
        </li>
      );
    })}
  </ul>
)}

由于这同时检查了长度和true citationpath的值我在生产中使用此代码。