什么是createPortal？
注意這是一個API，不是組件，他的作用是：將一個組件渲染到DOM的任意位置，跟Vue的
Teleport組件類似。
用法?
import { createPortal } from 'react-dom';const App = () => {return createPortal(<div>前端s</div>, document.body);
};export default App;
參數
- children：要渲染的組件
- domNode：要渲染到的DOM位置
- key?：可選，用于唯一標識要渲染的組件
?返回值
- 返回一個React元素(即jsx)，這個元素可以被React渲染到DOM的任意位置
應用場景
- 彈窗
- 下拉框
- 全局提示
- 全局遮罩
- 全局Loading
?例如 Antd 的 Modal 組件，就是掛載到 body 上的。
?
?案例
?全局loading
src/components/Loadingl/index.tsx
import './index.css'const Loading: React.FC = () => {return <div className="loading">lodaing...</div>;
};export default Loading;
使用createPortal 掛載到body
import { createPortal } from 'react-dom'const Loading = () => {return createPortal(<div className='loading'>loading...</div>,document.body);
}export default Loading;?createPortal更靈活，可以掛載到任意位置
