docs: update docs surrounding cx.render
This commit is contained in:
1 parent
2cf90b6903
commit
5ffa60664c
1 file changed
+16
-3
@@ -67,7 +67,7 @@ fn App((cx, props): Component<()>) -> Element {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
Do note: the `rsx!` macro returns a `Closure`, an anonymous function that has a unique type. Because every closure is unique, we cannot return *just* `rsx!` from a match statement. Every `rsx!` call must be rendered first when used in match statements.
|
Do note: the `rsx!` macro returns a `Closure`, an anonymous function that has a unique type.
|
||||||
|
|
||||||
To make patterns like these less verbose, the `rsx!` macro accepts an optional first argument on which it will call `render`. Our previous component can be shortened with this alternative syntax:
|
To make patterns like these less verbose, the `rsx!` macro accepts an optional first argument on which it will call `render`. Our previous component can be shortened with this alternative syntax:
|
||||||
|
|
||||||
@@ -86,6 +86,19 @@ This syntax even enables us to write a one-line component:
|
|||||||
static App: Fc<()> = |(cx, props)| rsx!(cx, "hello world!");
|
static App: Fc<()> = |(cx, props)| rsx!(cx, "hello world!");
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Alternatively, for match statements, we can just return the builder itself and pass it into a final, single call to `cx.render`:
|
||||||
|
|
||||||
|
```rust
|
||||||
|
fn App((cx, props): Component<()>) -> Element {
|
||||||
|
let greeting = match get_name() {
|
||||||
|
"jack" => rsx!("Hey Jack, how's Diane?" ),
|
||||||
|
"diane" => rsx!("Hey Diana, how's Jack?" ),
|
||||||
|
name => rsx!("Hello, {name}!" ),
|
||||||
|
};
|
||||||
|
cx.render(greeting)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
## Nesting RSX
|
## Nesting RSX
|
||||||
|
|
||||||
By looking at other examples, you might have noticed that it's possible to include `rsx!` calls inside other `rsx!` calls. With the curly-brace syntax, we can include anything in our `rsx!` that implements `IntoVnodeList`: a marker trait for iterators that produce Elements. `rsx!` itself implements this trait, so we can include it directly:
|
By looking at other examples, you might have noticed that it's possible to include `rsx!` calls inside other `rsx!` calls. With the curly-brace syntax, we can include anything in our `rsx!` that implements `IntoVnodeList`: a marker trait for iterators that produce Elements. `rsx!` itself implements this trait, so we can include it directly:
|
||||||
@@ -117,8 +130,8 @@ In the case of a log-in screen, we might want to display the same NavBar and Foo
|
|||||||
|
|
||||||
```rust
|
```rust
|
||||||
let screen = match logged_in {
|
let screen = match logged_in {
|
||||||
true => rsx!(cx, DashboardScreen {}),
|
true => rsx!(DashboardScreen {}),
|
||||||
false => rsx!(cx, LoginScreen {})
|
false => rsx!(LoginScreen {})
|
||||||
};
|
};
|
||||||
|
|
||||||
cx.render(rsx!{
|
cx.render(rsx!{
|
||||||
|
|||||||
Reference in new issue
Block a user