conditional_rendering.rs 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. #![allow(non_snake_case)]
  2. use dioxus::prelude::*;
  3. fn main() {
  4. dioxus::desktop::launch(App);
  5. }
  6. pub fn App(cx: Scope) -> Element {
  7. let is_logged_in = use_state(&cx, || false);
  8. cx.render(rsx!(LogIn {
  9. is_logged_in: **is_logged_in,
  10. on_log_in: |_| is_logged_in.set(true),
  11. on_log_out: |_| is_logged_in.set(false),
  12. }))
  13. }
  14. #[inline_props]
  15. fn LogIn<'a>(
  16. cx: Scope<'a>,
  17. is_logged_in: bool,
  18. on_log_in: EventHandler<'a>,
  19. on_log_out: EventHandler<'a>,
  20. ) -> Element<'a> {
  21. // ANCHOR: if_else
  22. if *is_logged_in {
  23. cx.render(rsx! {
  24. div {
  25. "Welcome!",
  26. button {
  27. onclick: move |_| on_log_out.call(()),
  28. "Log Out",
  29. }
  30. }
  31. })
  32. } else {
  33. cx.render(rsx! {
  34. button {
  35. onclick: move |_| on_log_in.call(()),
  36. "Log In",
  37. }
  38. })
  39. }
  40. // ANCHOR_END: if_else
  41. }
  42. #[inline_props]
  43. fn LogInWarning(cx: Scope, is_logged_in: bool) -> Element {
  44. // ANCHOR: conditional_none
  45. if *is_logged_in {
  46. return None;
  47. }
  48. cx.render(rsx! {
  49. a {
  50. "You must be logged in to comment"
  51. }
  52. })
  53. // ANCHOR_END: conditional_none
  54. }