reactjs 编写一个简单的图片轮播图

知识点总结

• 本地图片路径加载
• 组件的两种形式 方法组件 类组件
• prop state
• createClass 已废弃
• create-react-app 脚手架
• react 获取DOM 节点

文件结构

App.js 代码

import React, { Component } from 'react';
import './App.css';

//方法Btns组件
function Btns() {
  return (
    
"btns">
      
"javascript:;">
      
"javascript:;">
      
"javascript:;">
      
"javascript:;">
      
"javascript:;">
      
"javascript:;">
    
  );
}

//方法Imgs 组件
function Imgs() {
  return (
    
"imgs">
        
"图片1" src={require('./images/banner1.jpg')} />
        
"图片1" src={require('./images/banner2.jpg')} />
        
"图片1" src={require('./images/banner3.jpg')} />
        
"图片1" src={require('./images/banner4.jpg')} />
        
"图片1" src={require('./images/banner5.jpg')} />
        
"图片1" src={require('./images/banner6.jpg')} />
    
  );
}

//es6 类组件
class App extends Component {
  constructor(props) {
    super(props);
    this.state =  {iNow: 0,bCheck: true};
    this.handleMouseover = this.handleMouseover.bind(this);
    this.handleMouseout = this.handleMouseout.bind(this);
  }

  handleMouseover() {
    this.state.bCheck = false;
  }


  handleMouseout() {
    this.state.bCheck = true;
  }

  //
  componentDidMount() {
     this.timerID = setInterval(
       () => this.timer(),
       2000
     );
   }

   componentWillUnmount() {
     clearInterval(this.timerID);
    }

   timer() {
     if(this.state.bCheck) {
       if(this.state.iNow === 5) {
          this.state.iNow = 0;
       }
       else {
         this.state.iNow++;

       }
       this.iNowlistener();
     }
     else {
       return false;
     }
   }


   iNowlistener(){//改变的核心函数
     var aBtns=document.getElementsByTagName('a');
     var oImgs=document.getElementById('imgs');
     var aImgsLi=oImgs.getElementsByTagName('li');
     aBtns[0].style.background = 'rgba(255,255,255,0.5)';
      var len = aBtns.length;
      for(var i =0; i < len; i++)
      {
          if(i === this.state.iNow) {
              aBtns[i].style.background = 'rgba(255,255,255,0.5)';
              aImgsLi[i].style.display = "block";
          }
          else {
            aBtns[i].style.background = 'rgba(0,0,0,0.3)';
            aImgsLi[i].style.display = "none";
          }

      }
    }


  //渲染组件模板
  render() {
    return (
      
this.props.idNames} onMouseOver={this.handleMouseover} onMouseOut={this.handleMouseout}>
         
         
      
    );
  }

}

export default App;

Index.js 代码

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render("tabs" />, document.getElementById('root'));
registerServiceWorker();

App.css

* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}

a {
  text-decoration: none;
}
img {
  border: none;
}


#tabs {
  width: 1130px;
  height: 500px;
  margin:100px auto;
  overflow: hidden;
  position: relative;
}

#tabs li {
  float: left;
}

#btns {
  position: absolute;
  top: 88%;
  left:390px;
  z-index: 10;
}

#btns li {
  margin: 10px;
}

#btns li a {
  width: 20px;
  height: 20px;
  border-radius:50%;
  display: block;
  background: rgba(0,0,0,0.3);
  border:3px solid gray;
}

刚接触reactjs 小白 正在摸索中 还存在很多疑问 后面会持续学习 ，更新reactjs 的博客 努力努力 。

1、获取真实的DOM 用ref 报错 ，所以在iNowlistener 我直接写死了

2、this.props.xxx 传数组的时候 ，报错，不知道怎么传

参考链接：
https://reactjs.org/docs/events.html#supported-events
https://www.cnblogs.com/djtao/p/6204641.html
http://www.ruanyifeng.com/blog/2015/03/react.html