React 中通过 JSON 进行条件渲染

Question

希望有人能帮助我。现在，我正在从 PHP + MySQL 切换到 React + NextJS，因此我是一个完全的新手 - 所以如果我的问题的答案非常简单，请原谅我 XD。

如果我的数据库中有该链接应指向的图像或视频，我想呈现一个链接。我已将所有相关数据以 JSON 格式保存在一个变量中，然后用于在表中显示所有内容。

我的代码目前看起来像这样

JSON

const allDeliveries = [
  {
    category: "Category 1",
    items: [
      {
        amount: "2",
        name: "name 1",
        source: {
          name: "irrelevant link name 1",
          link: "irrelevant link 1",
        },
        hasMedia: true,
        media: [
          "media link 1",
          "media link 2",
        ],
        details: {
          name: "irrelevant link name 2",
          link: "irrelevant link 2",
        },
      },
      {
        amount: "2",
        name: "name 2",
        source: {
          name: "irrelevant link name 1",
          link: "irrelevant link 1",
        },
        hasMedia: false,
        media: null,
        details: {
          name: "irrelevant link name 2",
          link: "irrelevant link 2",
        },
      },
    ],
  },
];

相关表格部分

<tbody className="tailwind styles">
    {allDeliveries.map((allDeliveries) => (
      <Fragment key={allDeliveries.category}>
        <tr className="tailwind styles">
          <th
            colSpan={5}
            scope="colgroup"
            className="tailwind styles"
          >
            {allDeliveries.category}
          </th>
        </tr>
        {allDeliveries.items.map((items, itemsIdx) => (
          <tr
            key={items.name}
            className={classNames(
              itemsIdx === 0
                ? "tailwind styles"
                : "tailwind styles",
              "tailwind styles"
            )}
          >
            <td className="tailwind styles">
              {items.amount}
            </td>
            <td className="tailwind styles">
              {items.name}
            </td>
            <td className="tailwind styles">
              <a
                href={items.source.link}
                target="_blank"
                className="tailwind styles"
              >
                {items.source.name}
              </a>
            </td>
            <td className="tailwind styles">
              {items.media}
            </td>
            <td className="tailwind styles">
              <a
                href={items.details.link}
                target="_blank"
                className="tailwind styles"
              >
                {items.details.name}
              </a>
            </td>
          </tr>
        ))}
      </Fragment>
    ))}
</tbody>

现在是棘手的部分。我只想渲染当前在 JSON 中的 hasMedia 设置为 true 时渲染 {items.media} 的链接，然后插入 items.media 链接。我现在肯定已经看了一两个小时有关条件渲染主题的教程，但我只是没有任何进展。希望有人能帮助我。谢谢！

我在过去的一两个小时里观看了 YouTube 视频和其他教程，尝试使用所示的代码并在我的项目中实现它，但没有成功。

Answer 1

{allDeliveries.items.map((items, itemsIdx) => {
  if (!items.hasMedia) {
     return null;
  }
  return (
   <tr key={items.name}>
     ...
   </tr>
  )}
}

注意括号。