React+NextJS基于JSON的条件渲染：按需渲染媒体链接

你只需要替换表格中渲染items.media的部分，用条件渲染结合数组遍历就能实现需求。具体修改如下：

修改后的表格代码（重点看media列） #

<tbody className="tailwind styles">
    {allDeliveries.map((delivery) => (
      <Fragment key={delivery.category}>
        <tr className="tailwind styles">
          <th
            colSpan={5}
            scope="colgroup"
            className="tailwind styles"
          >
            {delivery.category}
          </th>
        </tr>
        {delivery.items.map((item, itemIdx) => (
          <tr
            key={item.name}
            className={classNames(
              itemIdx === 0
                ? "tailwind styles"
                : "tailwind styles",
              "tailwind styles"
            )}
          >
            <td className="tailwind styles">
              {item.amount}
            </td>
            <td className="tailwind styles">
              {item.name}
            </td>
            <td className="tailwind styles">
              <a
                href={item.source.link}
                target="_blank"
                className="tailwind styles"
              >
                {item.source.name}
              </a>
            </td>
            <td className="tailwind styles">
              {/* 核心修改部分 */}
              {item.hasMedia && item.media.map((mediaLink, idx) => (
                <a 
                  key={idx} 
                  href={mediaLink} 
                  target="_blank" 
                  className="tailwind styles mr-2"
                >
                  媒体资源 {idx + 1}
                </a>
              ))}
              {/* hasMedia为false时的显示，可按需调整 */}
              {!item.hasMedia && <span>无媒体资源</span>}
            </td>
            <td className="tailwind styles">
              <a
                href={item.details.link}
                target="_blank"
                className="tailwind styles"
              >
                {item.details.name}
              </a>
            </td>
          </tr>
        ))}
      </Fragment>
    ))}
</tbody>

关键说明 #

1. 条件渲染逻辑：用item.hasMedia && ...的语法，只有当hasMedia为true时，才会渲染后续的链接元素（React中true && 元素会直接渲染元素，false && 元素会被忽略）。
2. 数组遍历处理：因为media是数组结构，所以用map方法遍历每个链接，生成对应的<a>标签。注意给每个遍历元素添加唯一key（这里用索引idx，如果媒体链接本身唯一，也可以直接用链接作为key）。
3. 变量名优化：把原代码中重复的allDeliveries变量名改为delivery，避免命名冲突，提升代码可读性。

内容的提问来源于stack exchange，提问作者Mauric3