react实现简单的遮罩层

这是一种常见的效果，一般为了突出显示内容时会被用到。例如下面的我所写的效果我希望点击后，我可以将剩余的部分填充为黑色（遮罩层）。实现它不算太难，难在高度适应性。
我记录一下我的实现 ps？：这里是部分代码，因为是实际项目中，所以内容较少，过后会继续补充～

css部分

.mask{
  background: rgba(0,0,0,0.4) !important;
  z-index: 10;
  height: 100vh;
  position: fixed;
  width: 100vw;
}
.selectMask_box{
  background: rgba(0,0,0,0);
  transition: all .2s linear
}

目前做的项目是基于react移动端的，我会在state内定义dateSelected这一属性的bool值，每点击一次我就会取反，以此来判断是显示还是隐藏。

js部分

handleMask=()=>{
this.setState({
   dateSelected: !this.state.dateSelected
})
}
<div
    onClick={this.handleMask}
    className={`selectMask_box ${this.state.dateSelected ? "mask" : ""} `} >

  //这里是待展示的内容，<div>...</div>
 //你可以自己设置dataSelected的初始值，同时请注意注意三元运算的顺序。
</div>

作为一个实习生还在学习中，及时记录自己遇到的或大或小的知识点，这篇文章我会在在丰富一下，希望对大家有所帮助。
分割线----------------------------------------------