Struct yew::html::PhantomComponent
source · pub struct PhantomComponent<T>where
T: BaseComponent,{ /* private fields */ }
Expand description
A Component to represent a component that does not exist in current implementation.
During Hydration, Yew expected the Virtual DOM hierarchy to match the layout used in server-side rendering. However, sometimes it is possible / reasonable to omit certain components from one side of the implementation. This component is used to represent a component as if a component “existed” in the place it is defined.
§Warning
The Real DOM hierarchy must also match the server-side rendered artifact. This component is only usable when the original component does not introduce any additional elements. (e.g.: Context Providers)
A generic parameter is provided to help identify the component to be substituted. The type of the generic parameter is not required to be the same component that was in the other implementation. However, this behaviour may change in the future if more debug assertions were to be introduced. It is recommended that the generic parameter represents the component in the other implementation.
§Example
use yew::prelude::*;
#[function_component]
fn ServerApp() -> Html {
// The Server Side Rendering Application has 3 Providers.
html! {
<Provider1>
<Provider2>
<Provider3>
<Comp />
</Provider3>
</Provider2>
</Provider1>
}
}
#[function_component]
fn App() -> Html {
// The Client Side Rendering Application has 4 Providers.
html! {
<Provider1>
<Provider2>
<Provider3>
// This provider does not exist on the server-side
// Hydration will fail due to Virtual DOM layout mismatch.
<Provider4>
<Comp />
</Provider4>
</Provider3>
</Provider2>
</Provider1>
}
}
To mitigate this, we can use a PhantomComponent
:
use yew::prelude::*;
#[function_component]
fn ServerApp() -> Html {
html! {
<Provider1>
<Provider2>
<Provider3>
// We add a PhantomComponent for Provider4,
// it acts if a Provider4 component presents in this position.
<PhantomComponent<Provider4>>
<Comp />
</PhantomComponent<Provider4>>
</Provider3>
</Provider2>
</Provider1>
}
}
#[function_component]
fn App() -> Html {
html! {
<Provider1>
<Provider2>
<Provider3>
// Hydration will succeed as the PhantomComponent in the server-side
// implementation will represent a Provider4 component in this position.
<Provider4>
<Comp />
</Provider4>
</Provider3>
</Provider2>
</Provider1>
}
}
Trait Implementations§
source§impl<T> BaseComponent for PhantomComponent<T>where
T: BaseComponent + 'static,
Self: 'static,
impl<T> BaseComponent for PhantomComponent<T>where
T: BaseComponent + 'static,
Self: 'static,
source§type Properties = ChildrenProps
type Properties = ChildrenProps
source§fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool
fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool
source§fn changed(
&mut self,
_ctx: &Context<Self>,
_old_props: &Self::Properties,
) -> bool
fn changed( &mut self, _ctx: &Context<Self>, _old_props: &Self::Properties, ) -> bool
source§fn view(&self, ctx: &Context<Self>) -> HtmlResult
fn view(&self, ctx: &Context<Self>) -> HtmlResult
source§fn rendered(&mut self, _ctx: &Context<Self>, _first_render: bool)
fn rendered(&mut self, _ctx: &Context<Self>, _first_render: bool)
source§fn prepare_state(&self) -> Option<String>
fn prepare_state(&self) -> Option<String>
source§impl<T> Debug for PhantomComponent<T>where
T: BaseComponent,
impl<T> Debug for PhantomComponent<T>where
T: BaseComponent,
source§impl<T> FunctionProvider for PhantomComponent<T>where
T: BaseComponent,
impl<T> FunctionProvider for PhantomComponent<T>where
T: BaseComponent,
source§type Properties = ChildrenProps
type Properties = ChildrenProps
source§fn run(ctx: &mut HookContext, props: &Self::Properties) -> HtmlResult
fn run(ctx: &mut HookContext, props: &Self::Properties) -> HtmlResult
Auto Trait Implementations§
impl<T> !Freeze for PhantomComponent<T>
impl<T> !RefUnwindSafe for PhantomComponent<T>
impl<T> !Send for PhantomComponent<T>
impl<T> !Sync for PhantomComponent<T>
impl<T> Unpin for PhantomComponent<T>where
T: Unpin,
impl<T> !UnwindSafe for PhantomComponent<T>
Blanket Implementations§
source§impl<T> BorrowMut<T> for Twhere
T: ?Sized,
impl<T> BorrowMut<T> for Twhere
T: ?Sized,
source§fn borrow_mut(&mut self) -> &mut T
fn borrow_mut(&mut self) -> &mut T
§impl<T> Instrument for T
impl<T> Instrument for T
§fn instrument(self, span: Span) -> Instrumented<Self>
fn instrument(self, span: Span) -> Instrumented<Self>
§fn in_current_span(self) -> Instrumented<Self>
fn in_current_span(self) -> Instrumented<Self>
source§impl<T> IntoPropValue<Option<T>> for T
impl<T> IntoPropValue<Option<T>> for T
source§fn into_prop_value(self) -> Option<T>
fn into_prop_value(self) -> Option<T>
self
to a value of a Properties
struct.source§impl<T> IntoPropValue<T> for T
impl<T> IntoPropValue<T> for T
source§fn into_prop_value(self) -> T
fn into_prop_value(self) -> T
self
to a value of a Properties
struct.