你是不是遇到过这样的问题,花费了很多精力在一个子组件中写好了一段代码,比如一个逻辑复杂的按钮,离发布已经不久了,产品这时告诉你这个按钮需要移动下位置,比如移动到父组件的页面顶部。从产品的角度,不就移个位置,有什么难的。但其实移动到上级甚至上上级的组件中,当前在子组件维护的所有状态,调用的方法是不是都要迁移过去,顿觉好坑。那有没有办法,用最少的改动实现产品的要求呢。
这里提供两个方法,有一个方法也是多数人都能想到的方案。
发挥下主观能动性,先想一想你的方案
方案一:通过css定位实现,缺陷,如果有其它元素占用页面空间,就要重新改变定位值
方案二:就是我要说明的createPortal用法,大胆尝试一下,你会发现新大陆
导入:import { createPortal } from ‘react-dom’;
子组件:
<Col flex="110px">
{/* createPortal 暴露给父组件使用 */}
{document.getElementById('portalElement') &&
createPortal(
<div className=“btn”}>
...大段代码
</div>,
document.getElementById('portalMeeting') as HTMLDivElement,
)}
</Col>
父组件
<div id="portalElement" style={{ marginLeft: 8 }}>
{' '}
</div>
详情去官网查看具体用法 官网