轮播组件基本结构（类组件）

// 导入
import React,{} from "react"
 
//使用：基本结构
export default class Banner extends React.Component{
       //状态：
       constructor(){
          super();
          this.state={
                   //写数据
          }
      }
      //渲染 ：
      render(){
          return(
              <div className="banner"></div>
           )
      }
} 
 
 
//使用：轮播
// 暴露的是类组件就写类组件，暴露的是函数组件就写函数组件
// 类组件需要继承React里的Component组件
export default class Banner extends React.Component{
       //构造器里面写状态
       constructor(){
          //状态里面写数据
          super();
          this.timer = null;//定时器初始
          this.state={
              //这里写初始化哦~
              //这里就可以根据改变n的值来驱动改变i的值进而改变图片，实现图片切换。
               n:0,
             //写数据
             轮播是要有图片的：而且图片不止一张
              img:[
              //这里写图片的路径
                require('./.xx/xx.jpg'),
                require('./.xx/xx.jpg'),
                require('./.xx/xx.jpg')
            ]
          }
      }
 
      //挂载完成再这里写：
      componentDidMount(){
           //定时器是啥，就是setInteval
       this.timer =  setInterval(()=>{
             //在这里改变n的值哟~
              let {n,img} = this.state;
              //在这里我们需要判断哦~当图片到最后一张的时候，就不能再++了哦~
              //不能再加了要干嘛呀？当然要从0开始哦~ 1，2,3,1...
              //下标咱们可以用什么来玩？下标就等于图片的总数-1
              // 利用长度-1回到最初的第一张图片哦~
              if(n==img.length-1){
                 n=0
              }else{
              //如果不是最后一张的话就进行下一张（++）
              n++;
           }
             //做完这个就完事了吗？没有，触发必须要重新渲染
             //如何渲染？
             //类组件：重新渲染（setState()）
             this.setState({
                 n
                })
              
          },2000)
          // 在单页面开发中，开启定时器一定要清除哦~
           // 因为不清除的话，打开页面下次进来再进来就会有多个定时器哦~（这样就会导致结果混乱了~）性能消耗也大哦~
         //那么什么时候清除定时器呀？当我们这个组件不使用的时候（销毁的时候就去清除定时器）
        // 销毁：
        在挂载里面完哦~
 
         //这个是销毁函数哦！~
         componentWillUnmount(){
              在这里销毁前，在构造器里添加一个timer为null哦~//定时器初始值
              //清除定时器哦~；
              clearInterval(this.timer)
          }
          
       },
      //渲染 ：
      render(){
          return(
                //解构就在这里解构哦~
               let {n,img} = this.state;
              //类名里面写样式（承载）
              <div className="banner">
                  <div className="banner-img">
                      // 由于我们的图片是一个数组，我们看到数组要干什么啊，数据对象都是要循环遍历 
                   //的，因为我们不可能拿一个数据和对象去渲染页面，而是拿它里面的一个数据
                     // 图片在state里，那么我们需要在这里拿他先要加个对象
                     {
                     
                         //在这里循环遍历每一项
                         //this.state.img//但这样写不太好，我们可以直接拿到img(通过结构的方式）
                          //解构了之后干嘛呢？
                          //这里我们就拿到了一堆图片的路径哦：img
                           img.map((v,i)=>{ v拿到的是图片的路径哦~，i拿到的是第几张图片哦~
                                <img key={i}, src="v" />
                                 //我们需要每隔两秒显示下一张图片：添加一个初始化定时器变量：0
                                  //图片展示用样式处理哦~
                                 //如果定义的初始值和i相同了就显示这张图片，否则隐藏这张图片
                                <img key={i}, src="v" style={{display:(i==n)?'block':'none'}}/>
                                 //轮播要干嘛呀？添加定时器啊
                                 定时器什么时候加呀？当然是一进到页面就加咯
                                 一进到页面就是挂载完成
                                        
                              })
                        }
                  </div>
                  //在这里写轮播点哦~
                  //轮播点使用 ul
                  <ul>
                      {
                       //img的map遍历
                       // map中的箭头函数
                       函数中的v,i
                        img标签使用v,i
                       img.map((v,i)=>{
                          <li key={i} src={v} className="{i==n?'select':''/>
                        })
                      }  
                 </ul>
              </div>
           )
      }
} 

__EOF__

本文作者：Sternstunde
本文链接：https://www.cnblogs.com/strundent/p/16902927.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！