Reactでイメージを反復する方法は？

Question

まあ、質問は非常に自明です。事は、私がアレイ上のこれらの画像を反復処理する方法がわからないです

const images = [('http://placehold.it/100x100/76BD22'), ('http://placehold.it/100x100/76BD23')]; 

// ProductPage Views 
const ProductPageView = 
    <section className="page-section ps-product-intro"> 
    <div className="container"> 
     <div className="product-intro"> 
     <div className="product-intro__images"> 
      <div className="product-gallery"> 
      <ul className="product-gallery-thumbs__list"> 
       {images.map(function(image, imageIndex){ 
       return <li key={ imageIndex }>{image}</li>; 
       })} 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 
    </section> 

：（もちろん、レンダリングの内側に）私はここにこのコードを持っています。私のコードに何が問題なのですか？

Answer 1

あなたの配列は、イメージタグではなく画像URLの配列です。だから、あなたのコードは近いですが、イメージをタグ内の画像タグの中に置く必要があります。

const images = [('http://placehold.it/100x100/76BD22'), ('http://placehold.it/100x100/76BD23')]; 
// ProductPage Views 

const ProductPageView = 
    <section className="page-section ps-product-intro"> 
    <div className="container"> 
     <div className="product-intro"> 
     <div className="product-intro__images"> 
      <div className="product-gallery"> 
      <ul className="product-gallery-thumbs__list"> 
       {images.map(function(imageSrc) { 
       return (
        <li key={ imgSrc }> 
        <img src={ imgSrc } /> 
        </li> 
       ); 
       })} 
      </ul> 
      </div> 
     </div> 
     </div> 
    </div> 
    </section> 

using an array index as a key in generalに対してもお勧めします。 imgSrcはユニークなのでここでは良いキーを作るでしょう。

また、スクリーンリーダーの場合はimgにalt属性を含めるようにしてください。あなたの配列を次のようにしたいかもしれません：

const images = [ 
    { src: 'http://placehold.it/100x100/76BD22', alt: 'Your description here 1' }, 
    { src: 'http://placehold.it/100x100/76BD23', alt: 'Your description here 2' } 
]; 

// ... 

{images.map(function(imageProps) { 
    return (
    <li key={ imageProps.src }> 
     <img src={ imageProps.src } alt={ imageProps.alt } /> 
    </li> 
); 
})} 

Answer 2

イメージとして表示したいと思っていますか？次に、imgタグを使用してください。

<ul className="product-gallery-thumbs__list"> 
    {images.map(function(image, imageIndex){ 
     return <img key={ imageIndex } src={ image } /> 
    })} 
</ul>