自制react弹框组件心得总结（高手勿入）

没有动手实操就不是你的知识！

需要日后留意的知识点：

1. 组件首字母 大写 ！

2. Scss同样可以使用 import ，在项目中通常这样使用：通过一个scss文件用来作为全局的css样式引入，这样就不需要每一个样式都引入一遍看着麻烦，例如：

@charset "UTF-8";

@import
  "mixin",
  "variable",
  "base/reset",
  "base/icon",
  "component/base64",
  "component/topbar",
  "component/navigator",
  "component/footer",
  "component/login",
  "views/lucky",
  "views/introducation",
  "views/a"

3. video标签有话说，自身集合许多的接口、方法；有需要点击参看

4. 蒙层使用 position:fixed——这个方法可以直接让蒙层脱离文档流，这样宽高的100%就是相对屏幕。

5. React 的 refs 相关问题，目前讲不明白，因为我也一知半解。。。（9月1号会写一篇文档专门讲，先立FLAG！）

下面是我实现的方法：

Scss部分：

.litleCoverStyle{
  width:200px;
  height:133px;
  position: absolute;
  top: 100px;
  right: 400px;
  background: #000;
  opacity: .25;
}

.litleIcon{
  width: 50px;
  border-radius: 50%;
  background: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  margin-top: -25px;
  margin-left: -25px
}

.btnPic{
  position: absolute;
  top: 100px;
  right: 400px;
  width: 200px;
}

.videos{
    width: 624px;
    height: 368px;
    position:absolute;
    top:400px;
  }

.videoCover{
    width: 624px;
    height: 368px;
    position:absolute;
    top:0px;
    background:#000;
    opacity: .25;
    z-index: 998;
  }


.screenCover{
  background: #000;
  opacity: .25;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.cancel{
  width: 30px;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 999
}

jsx部分：

class VideoPlay extends React.Component{
  constructor(props){
    super(props)

    this.hide = {
      display: "none",
      opacity: 0
    }

    this.show = {
      display: "block",
    }

    this.state = {

      videoOpen: this.hide,

      videoCover: this.show
    }

  }

  handleOpen(e){
    this.setState({
      videoOpen: this.show,
    })
  }

  handleVideoPlay(e){
    this.setState({
      videoCover: this.hide
    })
    this.video.play()
  }

  handleVideoCancel(e){
    this.setState({
      videoOpen: this.hide,
      videoCover: this.show
    })
    this.video.pause()
    this.video.load()
  }
  render(){
    return(
      
      

        {/* 按钮部分： */}
        

          ![](按钮视频图片)
          

            ![](播放图标)
          
        

        {/* 视频部分： */}
        

          
 
          ![](右上角那个X)

          

            ![](播放图标)
          
          
        
      
    )
  }
}

点击查看效果——这是仅做测试网站，公司官网是www.hclzx.com，欢迎登陆注册哦！

THE END