想要实现布局效果,红区高度固定可滑动可收起。红区引用绿区组件。
一般会想到如下方案,红区样式:
width:200px;
height: 100%;
overflow-y: auto;
overflow-x: visible;
但是效果并不好,绿区直接隐藏了
最终采用布局方案
红区width: 200px;height: 100%;overflow-y: auto;overflow-x: visible;黑区width: auto;height: 100%;overflow: hidden;display: flex;flex-direction: row;
createPortal 红绿区数据流动不受影响
createPortal(<div>绿区</div>,document.querySelector('黄区'))