How to render a tree? #1429
Answered
by
ealmloff
wanjianghongfeng
asked this question in
Q&A
-
I have a NodeTree #[inline_props]
pub fn Menu(cx: Scope, menus: Vec<MenuResource>) -> Element {
let mut stack: VecDeque<&MenuResource> = VecDeque::new();
stack.push_back(&menus[0]);
log::info!("menu: {:?}", menus);
cx.render(rsx! {
ul {
class: "menu bg-base-200 w-56 rounded-box",
traverse_tree(cx, &menus[0])
}
})
}
fn traverse_tree(cx: Scope<MenuProps>, menu: &MenuResource) {
log::info!("Node Value: {}", menu.name);
rsx! {
li {
if !menu.children.is_empty() {
rsx! {
details {
open: true
}
summary {
String::as_str(&menu.name)
}
}
}else {
rsx! {
ul {
li {
button {
class: "btn btn-xs sm:btn-sm md:btn-md lg:btn-lg",
Icon {
title: &menu.name,
icon: HiMenu,
}
a {
String::as_str(&menu.name)
}
}
}
}
}
}
}
};
for child in &menu.children {
traverse_tree(cx, child);
}
} it didn't work |
Beta Was this translation helpful? Give feedback.
Answered by
ealmloff
Sep 4, 2023
Replies: 1 comment 1 reply
-
In this code, you create a rsx value, but never use it: rsx! {
li {
if !menu.children.is_empty() {
rsx! {
details {
open: true
}
summary {
String::as_str(&menu.name)
}
}
}else {
rsx! {
ul {
li {
button {
class: "btn btn-xs sm:btn-sm md:btn-md lg:btn-lg",
Icon {
title: &menu.name,
icon: HiMenu,
}
a {
String::as_str(&menu.name)
}
}
}
}
}
}
}
}; Instead you can return the rsx value: #[inline_props]
pub fn Menu(cx: Scope, menus: Vec<MenuResource>) -> Element {
let mut stack: VecDeque<&MenuResource> = VecDeque::new();
stack.push_back(&menus[0]);
log::info!("menu: {:?}", menus);
cx.render(rsx! {
ul {
class: "menu bg-base-200 w-56 rounded-box",
traverse_tree(cx, &menus[0])
}
})
}
fn traverse_tree(cx: Scope<MenuProps>, menu: &MenuResource) -> LazyNodes {
log::info!("Node Value: {}", menu.name);
rsx! {
li {
if !menu.children.is_empty() {
rsx! {
details {
open: true
}
summary {
String::as_str(&menu.name)
}
}
}else {
rsx! {
ul {
li {
button {
class: "btn btn-xs sm:btn-sm md:btn-md lg:btn-lg",
Icon {
title: &menu.name,
icon: HiMenu,
}
a {
String::as_str(&menu.name)
}
}
}
}
}
}
}
for child in &menu.children {
traverse_tree(cx, child)
}
}
} |
Beta Was this translation helpful? Give feedback.
1 reply
Answer selected by
wanjianghongfeng
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
rsx!{}
just creates a fragment of HTML, it will only be rendered if it is returned from a component or used in anotherrsx!{}
that is returned.In this code, you create a rsx value, but never use it: