Portal 可以傳送組件到指定的元素，常用在有階層層級的 Modal
在 index.html 新增 id=”modal” 的元素
/public/index.html
1
2
3
4
| <body>
<div id="root"></div>
<div id="modal"></div>
</body>
|
render App 到 #root
/src/index.js
1
2
3
4
5
6
7
| import React from "react";
import { createRoot } from 'react-dom/client';
import App from "./App";
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);
|
import Modal Component
/src/App.js
1
2
3
4
5
6
7
8
9
10
11
12
| import React, { Component } from 'react';
import Modal from "./Modal";
class App extends Component {
render() {
return (
<Modal/>
);
}
}
export default App;
|
import createPortal，並 return createPortal 到 #modal
/src/Modal.js
1
2
3
4
5
6
7
8
9
10
11
12
13
| import React, { Component } from 'react';
import { createPortal } from "react-dom";
class Modal extends Component {
render() {
return createPortal (
<div>Modal</div>,
document.getElementById('modal')
);
}
}
export default Modal;
|
最後設定的內容就會出現在 #modal 裡囉！
Hey！想學習更多前端知識嗎?
最近 Lala 開了前端課程 👉
【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手，又或是想學 RWD 的初學者，
我們將帶你從零開始，深入了解並掌握 RWD 響應式網頁設計的核心技術，快來一起看看吧 😊
🚀線上課程分享
線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。
Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住
如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！
Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。
