如何创建可根据传入参数条件渲染图片的React组件？

一、先明确组件的参数定义（TypeScript） #

先给组件的 props 定义类型，把图片设为可选字段，同时兼容单张/多张图片的场景：

interface BlogPostProps {
  title: string;
  content: string;
  // 单张图片可选
  imageUrl?: string;
  // 多张图片可选，可按需选择单张/多张的定义方式
  imageUrls?: string[];
}

如果想统一处理单张和多张，也可以直接用数组，空数组代表无图：

interface BlogPostProps {
  title: string;
  content: string;
  imageUrls?: string[];
}

二、条件渲染的几种实现方式 #

不需要特定HTML标签，直接通过JSX/TypeScript的逻辑判断即可实现，常用的几种写法：

1. 短路求值（&&）

当图片参数存在且有效时，才渲染图片区域：

const BlogPost = ({ title, content, imageUrl, imageUrls }: BlogPostProps) => {
  return (
    <div className="blog-post">
      <h2>{title}</h2>
      <div className="post-content">{content}</div>
      {/* 单张图片的条件渲染 */}
      {imageUrl && (
        <div className="post-image">
          <img src={imageUrl} alt={title} />
        </div>
      )}
      {/* 多张图片的条件渲染 */}
      {imageUrls && imageUrls.length > 0 && (
        <div className="post-images">
          {imageUrls.map((url, index) => (
            <img key={index} src={url} alt={`${title} 图${index+1}`} />
          ))}
        </div>
      )}
    </div>
  );
};

注意：如果imageUrls是空数组，imageUrls.length > 0会返回false，不会渲染图片区域。

2. 三元表达式

适合需要在无图时显示占位内容的场景：

const BlogPost = ({ title, content, imageUrls }: BlogPostProps) => {
  return (
    <div className="blog-post">
      <h2>{title}</h2>
      <div className="post-content">{content}</div>
      <div className="post-images">
        {imageUrls && imageUrls.length > 0 ? (
          imageUrls.map((url, index) => (
            <img key={index} src={url} alt={`${title} 图${index+1}`} />
          ))
        ) : (
          <p className="no-image">暂无图片</p>
        )}
      </div>
    </div>
  );
};

3. 提取渲染逻辑到单独函数

如果图片渲染逻辑复杂，把它抽出来让主组件更清晰：

const BlogPost = ({ title, content, imageUrls }: BlogPostProps) => {
  const renderImages = () => {
    if (!imageUrls || imageUrls.length === 0) return null;
    return (
      <div className="post-images">
        {imageUrls.map((url, index) => (
          <img key={index} src={url} alt={`${title} 图${index+1}`} />
        ))}
      </div>
    );
  };

  return (
    <div className="blog-post">
      <h2>{title}</h2>
      <div className="post-content">{content}</div>
      {renderImages()}
    </div>
  );
};

三、注意事项 #

• 处理图片参数时，要同时判断undefined和空数组/空字符串，避免渲染无效内容
• 多张图片渲染时，必须给每个<img>加唯一的key属性，满足React列表元素的标识要求
• 如果用TypeScript，可选参数会自动提示你处理undefined的情况，避免潜在错误

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