mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
636692507e
* Convert components concept docs from SC to FC - moved struct components to advanced topics - added docs about HOC for Suspense and Context - added a ease-in topic before components that introduces HTML/CSS/JS in yew - edit components concept to use function components * translations * fix todo links * fix tests * spelling bee
43 lines
872 B
Plaintext
43 lines
872 B
Plaintext
---
|
|
title: "Children"
|
|
---
|
|
|
|
`Children` is a special prop type that allows you to take what was provided as `Html` children.
|
|
|
|
```rust
|
|
use yew::{function_component, html, Html, Properties, Children};
|
|
|
|
#[function_component]
|
|
fn App() -> Html {
|
|
html! {
|
|
// highlight-start
|
|
<HelloWorld>
|
|
<span>{"Hey what is up ;)"}</span>
|
|
<h1>{"THE SKY"}</h1>
|
|
</HelloWorld>
|
|
// highlight-end
|
|
}
|
|
}
|
|
|
|
#[derive(Properties, PartialEq)]
|
|
pub struct Props {
|
|
// highlight-next-line
|
|
pub children: Children,
|
|
}
|
|
|
|
#[function_component]
|
|
fn HelloWorld(props: &Props) -> Html {
|
|
html! {
|
|
<div class="very-stylized-container">
|
|
// highlight-next-line
|
|
{ for props.children.iter() } //then use like this
|
|
</div>
|
|
}
|
|
}
|
|
|
|
```
|
|
|
|
## Further reading
|
|
|
|
- [Advanced ways to handle children](../../advanced-topics/children)
|