-
-
Notifications
You must be signed in to change notification settings - Fork 627
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
The display is inconsistent due to the location of provide_context. #2038
Comments
This is working as designed. Here is a version of #[component]
fn App2() -> impl IntoView {
let (red, set_red) = create_signal(false);
move || {
provide_context(SmallcapsContext(set_red));
view! {
<main>
<p class:red=red>
"apple2"
</p>
<Button2/>
</main>
}
}
} |
I understand, can we provide a Provider component?
|
Yes — providing a Provider component is a good idea and the correct solution. For me, this is another one of those "ahhh, now I understand why they do it this way" moments. Once we dropped explicit scope a Provider becomes a good idea for this reason. Luckily it is very easy to implement: #[component]
pub fn ContextProvider<T>(value: T, children: Children) -> impl IntoView
where
T: Clone + 'static,
{
run_as_child(move || {
provide_context(value);
children()
})
} I have tested this against your example and it works as expected with the #[derive(Copy, Clone)]
struct SmallcapsContext(WriteSignal<bool>);
#[component]
pub fn App() -> impl IntoView {
let (red, set_red) = create_signal(false);
view! {
<ContextProvider value=SmallcapsContext(set_red)>
<main>
<App2/>
<div>
<p class:red=red>"apple"</p>
<Button/>
</div>
</main>
</ContextProvider>
}
}
#[component]
pub fn Button() -> impl IntoView {
let setter = use_context::<SmallcapsContext>().unwrap().0;
view! {
<button on:click=move |_| {
setter.update(|value| *value = !*value)
}>"Toggle Red"</button>
}
}
#[component]
fn App2() -> impl IntoView {
let (red, set_red) = create_signal(false);
view! {
<ContextProvider value=SmallcapsContext(set_red)>
<main>
<p class:red=red>
"apple2"
</p>
<Button2/>
</main>
</ContextProvider>
}
}
#[component]
pub fn Button2() -> impl IntoView {
let setter = use_context::<SmallcapsContext>().unwrap().0;
view! {
<button on:click=move |_| {
setter.update(|value| *value = !*value)
}>"2. Toggle Red"</button>
}
} |
It looks good. This is a problem I found when writing the component library. I tried it out with the ContextProvider you provided and it worked fine. |
Describe the bug
The display is inconsistent due to the location of provide_context.
Leptos Dependencies
Please copy and paste the Leptos dependencies and features from your
Cargo.toml
.For example:
Modified at CodeSandbox at https://leptos-rs.github.io/leptos/view/08_parent_child.html
To Reproduce
Steps to reproduce the behavior:
Change the position of div and App2 under the main tag.
Button
Button The apple text turns red. Click theButton2
Button The apple2 text turns red.Button
Button The apple2 text turns red. Click theButton2
Button The apple2 text turns red.Expected behavior
Regardless of location, you should:
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
Add any other context about the problem here.
The text was updated successfully, but these errors were encountered: