解决在jsx中循环渲染嵌套标签的问题（map解决

     <Carousel autoplay effect="fade">
        <div>
      <h3 style={contentStyle}><img src="https://s3.bmp.ovh/imgs/2022/03/f7f970c420839111.jpg " alt="" /></h3>
    </div>
    <div>
      <h3 style={contentStyle}>2</h3>
    </div>
    <div>
      <h3 style={contentStyle}>3</h3>
    </div>
    <div>
      <h3 style={contentStyle}>4</h3>
    </div>
      </Carousel>
      const imgData = {
  url: [
    "https://s3.bmp.ovh/imgs/2022/03/f7f970c420839111.jpg",
    "https://s3.bmp.ovh/imgs/2022/03/57f7c11255246d85.jpg",
    "https://s3.bmp.ovh/imgs/2022/03/5414b14f9f3cb4ce.jpg",
    "https://s3.bmp.ovh/imgs/2022/03/1a815b856cda0af0.jpg",
    "https://s3.bmp.ovh/imgs/2022/03/4b124b44fb66cf0b.jpg",
  ],
};

将上面代码使用循环进行渲染，我在这里使用的是map，首先上map的用法

可以看到这里用map获得了数值的值

在这里面插入图片的值，发现一样可以成立

仿照上面设定数据，然后按照上面写代码

这样写完之后在里面直接调用标签，但是发现页面没有刷新

思考过后觉得该需要加上return才能返回，

最后页面成功出来，代码量缩减，所以就是告诉我自己，对于一个新的知识点，先从最简单的开始敲，把基础原理弄懂，然后代入整体的大代码中即可。