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

我假设您想将它们显示为图像，对吧？您应该使用<nav class="navbar bg-color3"> <div class="container-fluid"> <a href="#"><img src="/Content/images/uploads/photo-01.png" width="410" alt="PG Portal de Gastos" style="float: left; margin: 18px 10px 10px 0;"></a> <button class="round-toggle navbar-toggle menu-collapse-btn collapsed" data-toggle="collapse" data-target=".navMenuCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse navMenuCollapse"> <div class="login-panel"> <ul id="nav-list" class="nav pull-right"> <li><a href="#intro-center-image" class="btn btn-default goto" style="border: 1px solid transparent;">Inicio</a></li> <li><a href="#benefits-grid-num-2" class="btn btn-default goto" style="border: 1px solid transparent;">Beneficios</a></li> <li> <a href="#benefits-grid-images" class="btn btn-default goto" style="border: 1px solid transparent;">Funcionalides</a></li> <li><a href="#price-3col" class="btn btn-default goto" style="border: 1px solid transparent;">Planes</a></li> <li><a href="#contact-full" class="btn btn-default goto" style="border: 1px solid transparent;">Contacto</a></li> <li class="sub-menu-parent"> <a class="btn " href="#">Iniciar Sesión <i class="icon right-icon icon-login"></i></a> <ul class="sub-menu"> <li> <a class="btn btn-primary" style="border: 1px solid transparent;" href="@Url.Action("Login", "Cuenta")"> Portal </a> </li> <li> <a class="btn btn-primary" style="border: 1px solid transparent;" href="http://web.com/"> Portal </a> </li> </ul> </li> <a class="btn btn-primary" href="@Url.Action("Registrar", "Cuenta")"> Iniciar Prueba<i class="icon right-icon icon-download"></i> </a> </ul> </div> </div> </div> </nav>标记。

img

Answer 2

您的数组是图像网址数组，而不是图像标记。因此，您的代码很接近，但您需要将图像放在列表项标记内的图像标记内。

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上为屏幕阅读器添加img属性。你可能想要像这样制作你的数组：

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>
  );
})}

如何在React上迭代图像？

2 个答案: