<img>タグをループ内で反応、判定、レンダリングし、画像アドレスが存在する場合のみ画像を表示する

ループ内でラベルを判定して描画し、ピクチャアドレスが存在する場合のみピクチャを表示することは、条件文を使用することで実現できます。以下に例を示します。

import React from 'react';

function MyComponent() {
    
    
  const imageUrls = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 图片地址数组

  return (
    <div>
      {
    
    imageUrls.map((imageUrl, index) => (
        <div key={
    
    index}>
          {
    
    imageUrl && <img src={
    
    imageUrl} alt={
    
    `图片 ${
      
      index + 1}`} />}
        </div>
      ))}
    </div>
  );
}

export default MyComponent;

上の例では、複数の画像 URL を含むimageUrls 配列があると想定しています。map() メソッドを使用して配列を走査することにより、各イメージ アドレスがループ内に存在するかどうかを判断します。

imageUrl が存在する場合(空でない文字列)、正しい src 属性と alt 属性を使用してラベルをレンダリングします。imageUrl が存在しない場合(空の文字列または未定義)、ラベルは表示されません。

ループでは、レンダリングされた要素ごとに一意のキー属性を提供します。ここではキーとしてインデックスを使用します。実際のアプリケーションでは、キーとして適切な一意の識別子を使用してください。

実際のニーズとデータ構造に応じて、例のイメージ アドレス配列とループ ロジックを調整します。