如何在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是独一无二的，所以它会成为一个很好的钥匙。

此外，确保屏幕阅读器包含上的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>