如何在React中让两个条件渲染JSX元素同行显示，分别对应图片和视频

核心修改点 #

• 清理原代码语法错误：删除重复的isImage状态声明、移除所有游离在组件逻辑外的无效JSX标签、删除重复冗余的DOM节点
• 修复条件渲染逻辑：删除渲染过程中直接调用setImage的错误写法，避免触发无限重渲染；调整判断逻辑为互斥渲染，符合「满足条件仅展示对应内容」的需求
• 外层容器添加Flex布局，保证渲染内容默认在同一行展示
• 优化判断逻辑：新增根据媒体文件后缀自动判断类型的逻辑，无需手动维护isImage状态，如果你的业务需要手动切换展示类型，可以保留对应状态即可

import React from "react";
import { Card } from "react-bootstrap";

function LastArticles({ postagem }) {
  // 判断媒体是否为图片，可根据实际业务替换为后端返回的类型字段
  const isImage = /\.(jpg|jpeg|png|gif|webp)$/i.test(postagem.media);

  // 图片展示组件
  const ImageCard = () => {
    return (
      <Card className="my-3 p-3" rounded>
        <a href={`/postagem/${postagem._id}`}>
          <Card.Img
            className="containerImg"
            src={postagem.media}
            variant="top"
          />
        </a>
        <Card.Body>
          <a href={`/postagem/${postagem._id}`}>
            <Card.Title as="div">
              <strong>{postagem.title}</strong>
            </Card.Title>
          </a>
          <Card.Text as="h4">Criado :</Card.Text>
        </Card.Body>
      </Card>
    );
  };

  // 视频展示组件
  const VideoCard = () => {
    return (
      <Card className="my-3 p-3" rounded>
        <a href={`/postagem/${postagem._id}`}>
          <div className="containerImg">
            <video className="containerImg" autoPlay loop muted>
              <source src={postagem.media} type="video/mp4"></source>
            </video>
          </div>
        </a>
        <Card.Body>
          <a href={`/postagem/${postagem._id}`}>
            <Card.Title as="div">
              <strong>{postagem.title}</strong>
            </Card.Title>
          </a>
          <Card.Text as="h4">Criado :</Card.Text>
        </Card.Body>
      </Card>
    );
  };

  // 外层添加flex布局，保证内容同行展示
  return (
    <div style={{ display: "flex", gap: "16px" }}>
      {isImage ? <ImageCard /> : <VideoCard />}
    </div>
  );
}

export default LastArticles;

特殊场景补充 #

如果你的业务场景需要两个内容同时展示并同行，直接修改条件渲染部分为同时返回两个组件即可，Flex布局会自动让两个卡片并排：

return (
  <div style={{ display: "flex", gap: "16px" }}>
    <ImageCard />
    <VideoCard />
  </div>
)

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