Hexagon Component
\n#[derive(Properties, PartialEq)]\npub struct Props {\n pub size: usize,\n pub units: Units,\n pub text: &'static str,\n}\n\npub struct Hexagon;\n\nimpl Component for Hexagon {\n type Message = ();\n type Properties = Props;\n\n fn create(_: &yew::Context<Self>) -> Self {\n Self\n }\n\n fn view(&self, context: &yew::Context<Self>) -> Html {\n html! {\n <div class={classes!(\n self.styles(),\n )}>\n <div class={classes!(\n \"hexagon\"\n )}>\n {context.props().text}\n </div>\n </div>\n }\n }\n}I don't know if this is the correct way to do this.
","upvoteCount":1,"answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Cloning is the perfectly valid way to pass props down. You want want to make sure the Units type is reference counted so it the data itself isn't cloned every time. The same recommendations about props apply here as well: AttrValue instead of String, etc
How to Drill Props #3744
-
|
I'd like to drill a Units prop down: App (Units Created) ----> Sizes (Units) ----> Hexagon At the moment I am cloning the props to drill: Sizes Component#[derive(Properties, PartialEq)]
pub struct Props {
pub units: Units,
}
pub struct Sizes;
impl Component for Sizes {
type Message = ();
type Properties = Props;
fn create(_: &yew::Context<Self>) -> Self {
Self
}
fn view(&self, context: &yew::Context<Self>) -> Html {
let hexagons = {
if context.props().units == Units::SAE {
[ "1/8", ]
} else {
[ "3", ]
}
};
html! {
<ul class={classes!(self.styles())}>
{hexagons.into_iter()
.enumerate()
.map(|(key, unit_value)| {
html! {
<Hexagon
key={key}
size={key}
units={context.props().units.clone()}
text={unit_value}
/>
}
})
.collect::<Html>()
}
</ul>
}
}
}Hexagon Component#[derive(Properties, PartialEq)]
pub struct Props {
pub size: usize,
pub units: Units,
pub text: &'static str,
}
pub struct Hexagon;
impl Component for Hexagon {
type Message = ();
type Properties = Props;
fn create(_: &yew::Context<Self>) -> Self {
Self
}
fn view(&self, context: &yew::Context<Self>) -> Html {
html! {
<div class={classes!(
self.styles(),
)}>
<div class={classes!(
"hexagon"
)}>
{context.props().text}
</div>
</div>
}
}
}I don't know if this is the correct way to do this. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
Cloning is the perfectly valid way to pass props down. You want want to make sure the Units type is reference counted so it the data itself isn't cloned every time. The same recommendations about props apply here as well: |
Beta Was this translation helpful? Give feedback.
Cloning is the perfectly valid way to pass props down. You want want to make sure the Units type is reference counted so it the data itself isn't cloned every time. The same recommendations about props apply here as well:
AttrValueinstead ofString, etc