傳送門
什麼是傳送門？
傳送門提供頂級方式來將子元件渲染至 DOM 層級中父元件的 DOM 節點外部。yew::create_portal(child, host) 傳回 Html 值，渲染 child 位於其父元件的層級下方，但當作 host 元素的子元件。
用法
傳送門的典型用法包括模式對話方塊和滑動卡片，以及更多技術應用，例如控制元素的內容 shadowRoot、將樣式表附加至周圍文件的 <head>，以及收集參考元素進入 <svg> 的中央 <defs> 元素。
請注意 yew::create_portal 是一個低階積木。函式庫應使用它來實作較高階的 API，然後可由應用程式使用。例如，這裡有一個簡單的彈跳對話方塊，將其 children 呈現在 yew 控制之外，透過 id="modal_host" 識別的元素中。
use yew::prelude::*;
#[derive(Properties, PartialEq)]
pub struct ModalProps {
#[prop_or_default]
pub children: Html,
}
#[function_component]
fn Modal(props: &ModalProps) -> Html {
let modal_host = gloo::utils::document()
.get_element_by_id("modal_host")
.expect("Expected to find a #modal_host element");
create_portal(
props.children.clone(),
modal_host.into(),
)
}
事件處理
在傳送門內元素上發出的事件在冒出時會遵循虛擬 DOM。也就是說，如果某個傳送門呈現在某個元素的子元素中，則該元素上的事件偵聽器會接收到從傳送門內部發出的事件，即使傳送門將其內容呈現在實際 DOM 中不相關的位置也是如此。
這使得開發人員可以忽視他們使用的元件是否透過有傳送門或是沒傳送門來實作。其子元素觸發的事件無論如何都會冒出。
已知一個問題是，從傳送門傳到已 關閉 Shadow 根元素的事件會被發送兩次，第一次目標是 Shadow 根元素內的元素，第二次目標是主機元素本身。請記住，**開啟的** Shadow 根元素可以正常運作。如果你有遇到這個問題，請隨時提交錯誤報告。