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

Question

设置：无头 Wordpress CMS、GatsbyJs、GraphQL

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

我有一个输出作者、标题和 url 的查询。数据是从 ACF 转发器字段中查询的，因此可能有一个 none 或多个项目。

代码如下：

  {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> 标签，在代码后放一个 </ul> 标签，前提是某些 citationPath 项是 returned.

选项#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>
        )
    })}

但后来我在每个列表项周围得到一个 <ul></ul>。

选项#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 项被 returned 时我得到 <ul></ul>。

选项#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>")}

没有HTML在那些没有returncitationPath数据的帖子上打印出来。但是，在那些我得到以下 HTML 输出：

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

所以好像{citationPath && parse("<ul>")}和{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>
      )
    })}

注意：我不简单地选择选项 #2 的原因是我不希望屏幕阅读器碰到空的 <ul></ul> 标签。

有没有人知道如何解决这个问题？

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>
)}

因为这会检查 length 和 truethy 的 citationPath 值，这就是您正在寻找的解决方案，作为行业专家，我使用此代码生产中。

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

Output ul tags conditionally in JSX?

javascript

conditional-statements

reactjs