如何使用循环将多个组件插入同一容器实现PSmall下img动态渲染

在React技术栈下不需要手动操作DOM创建元素，直接使用数组map方法声明式渲染即可，这是最符合React语法规范的实现方式：

直接渲染img标签的代码 #

<PSmall>
  {/* 遍历图片数组，有多少项就渲染多少个img元素 */}
  {images.map((imgSrc, index) => (
    <img
      {/* 列表渲染必须加唯一key，若图片路径唯一优先用imgSrc作为key */}
      key={index}
      src={imgSrc}
      alt={`展示图${index + 1}`}
    />
  ))}
</PSmall>

若要使用div背景图实现的代码 #

<PSmall>
  {images.map((imgSrc, index) => (
    <div
      key={index}
      className="img"
      {/* 把图片路径赋值给背景图属性 */}
      style={{ backgroundImage: `url(${imgSrc})` }}
    />
  ))}
</PSmall>

注意事项 #

• 不要使用document.createElement、appendChild这类原生DOM操作，会脱离React的渲染管控，容易出现状态不同步、渲染异常的问题
• 使用背景图实现时，需要提前给.img类设置宽高、background-size、background-position等样式，否则背景图无法正常展示
• 你原有思路里的循环逻辑存在边界错误，起始下标为1、终止条件为i < array.length - 1会漏掉数组首尾两个元素，直接全量遍历数组即可

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