react 魔法之createPortal（复用子组件已写好的代码到父组件）

  你是不是遇到过这样的问题，花费了很多精力在一个子组件中写好了一段代码，比如一个逻辑复杂的按钮，离发布已经不久了，产品这时告诉你这个按钮需要移动下位置，比如移动到父组件的页面顶部。从产品的角度，不就移个位置，有什么难的。但其实移动到上级甚至上上级的组件中，当前在子组件维护的所有状态，调用的方法是不是都要迁移过去，顿觉好坑。那有没有办法，用最少的改动实现产品的要求呢。
这里提供两个方法，有一个方法也是多数人都能想到的方案。
发挥下主观能动性，先想一想你的方案

方案一：通过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>

详情去官网查看具体用法 官网