React 中如何解决单组件的布局高度为100%?

或许有些小伙伴在使用 react 的过程中 , 会碰到需要组件中内容高度为窗口高度 , 但是设置盒子高度100%,又没有效果 , 假如抛弃框架的话,想必肯定会从body入手, 而对于react,这里我给大家提供一个小技巧.

jsx部分

render(){
    return(
        <div calssName={className.wrap}>
              <h2>我想和窗口一样高!</h2>
        </div>
  )
}

css部分

.wrap{
       height: 100%;
       position: absolute;
       left: 0;
       top: 0;
       background: hotpink;
}

到此 结束 !
如果小伙伴css基础可以的话,想必肯定是秒懂啦, 假如不用框架的话 , 估计会有小伙伴这样写:

html,
body{
  height : 100%;
}
.wrap{
  height : 100%;
}

的确这样也能解决问题 , 但你选择了用框架后还是另辟蹊径吧 , 框架用久了,也会慢慢的消磨掉很多基础的知识点 , 所以建议大家在使用框架做项目时 , 也不要忘了脚底下的东西哦!