在React中通过JSON进行条件渲染

希望有人能帮助我。现在，我正在从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视频和其他教程，试图使用所显示的代码并在我的项目中实现它，但没有成功。

更新的答案（根据评论）：

而不是{items.media}，你会检查media值是否为非falsy（非null或未定义），如果不是：在字符串/链接上循环。

{items.media && items.media.map((link, i) => <a key={link} href={link}>Media {i + 1}</a>)}

更多信息：Inline If with Logical && Operator

console.log(true && "something"); // will evaluate to "something"
console.log(false && "something"); // will evaluate to false

// So in the solution I have shown: if first expression is true (media "has items"*), it will then evaluate your array.map function for you

// * checking for null or undefined value

旧答案：

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

注意括号。

{array.map((item) => <div key={item.key}>...</div>)}
/* OR */
{array.map((item) => (<div key={item.key}>...</div>))}

缺少：

{array.map((item) => {
  /* you can set variables here or do conditional checks */
  return <div key={item.key}>...</div>;
})}

在React中通过JSON进行条件渲染

1条答案

相关问题

热门标签

最新问答