跳至主要内容
版本：0.21

门户

什么是门户？​

门户提供了一种一流的方法，可将子级渲染到父组件的 DOM 层级外部存在的 DOM 节点中。 yew::create_portal(child, host) 返回一个 Html 值，该值渲染 child，使其不在其父组件的层级下，而作为 host 元素的子级。

用法​

门户的典型用法包括模态对话框和悬停卡，以及更技术性的应用程序，例如控制元素的 shadowRoot 的内容，将样式表附加到周围文档的 <head>，并在 <svg> 的中心 <defs> 元素中收集引用的元素。

请注意，yew::create_portal 是一个低级构建块。库应使用它来实现高级 API，然后应用程序可以使用这些 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 中不相关的某个位置呈现其内容。

这允许开发人员不必知道他们使用的组件是否使用门户实现。无论如何，在其子元素上触发的事件都会冒泡。

一个已知问题是，从门户到关闭的影子根的事件将被派发两次，一次针对影子根内的元素，另一次针对主机元素本身。请记住，打开的影子根工作正常。如果这影响到你，请随时就此打开一个错误报告。

延伸阅读​