React Portals 簡述及其用例

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"React Portal是一種優秀的方法，可以將子組件渲染到由組件樹層次結構定義的父DOM層次結構之外的DOM節點中。Portal的最常見用例是子組件需要從視覺上脫離父容器的情況，如下所示。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"模態對話框"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"工具提示"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"懸浮卡片"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"加載器"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以使用ReactDOM.createPortal(child, container)創建一個Portal。這裏的"},{"type":"text","marks":[{"type":"strong"}],"text":"child"},{"type":"text","text":"是一個React元素、片段或字符串，而"},{"type":"text","marks":[{"type":"strong"}],"text":"container"},{"type":"text","text":"是Portal應該注入到的DOM位置（節點）。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以下是使用上述API創建的一個示例模態（modal）組件。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"const Modal =({ message, isOpen, onClose, children })=> {\n if (!isOpen) return null\n return ReactDOM.createPortal( \n

\n {message}\n