mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-24 05:03:06 +00:00
6c323e9fc5
* Move getting started to Guide * Clean up summary and getting started * Shorten intro by moving stuff to individual platform docs * Make intro even shorter, summarize features * Further cleanup; move development-related docs to separate section * Make `guide` a crate. Turn code samples into examples so that we can check if they compile * Rewrite "Describing the UI": * Focus on RSX syntax (interactivity covered in later chapters); make sure samples are tested; concise language * Move some "special attribute" samples to the `examples` directory * Simplify introduction to components * Simplify introduction to component props * Document Prop features; add code samples * Simplify component children docs * Interactivity: better introduction to events * Hooks: better introduction * Remove outdated doc * Introducs use_ref * Simplify User Input chapter * Document event handler props * Meme editor example * Meme editor walkthrough * Add dark mode example * Guide for context; dark mode example * Guide: custom hooks * Guide: conditional rendering * Guide: rendering lists * Guide: rendering lists + keys * Move remaining infor from Reference to guide * Delete reference book
71 lines
1.6 KiB
Rust
71 lines
1.6 KiB
Rust
#![allow(non_snake_case, unused)]
|
|
|
|
//! This example shows what *not* to do
|
|
|
|
use std::collections::HashMap;
|
|
|
|
use dioxus::prelude::*;
|
|
|
|
fn main() {}
|
|
|
|
fn AntipatternNestedFragments(cx: Scope<()>) -> Element {
|
|
// ANCHOR: nested_fragments
|
|
// ❌ Don't unnecessarily nest fragments
|
|
let _ = cx.render(rsx!(
|
|
Fragment {
|
|
Fragment {
|
|
Fragment {
|
|
Fragment {
|
|
Fragment {
|
|
div { "Finally have a real node!" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
));
|
|
|
|
// ✅ Render shallow structures
|
|
cx.render(rsx!(
|
|
div { "Finally have a real node!" }
|
|
))
|
|
// ANCHOR_END: nested_fragments
|
|
}
|
|
|
|
#[derive(PartialEq, Props)]
|
|
struct NoKeysProps {
|
|
data: HashMap<u32, String>,
|
|
}
|
|
|
|
fn AntipatternNoKeys(cx: Scope<NoKeysProps>) -> Element {
|
|
// ANCHOR: iter_keys
|
|
let data: &HashMap<_, _> = &cx.props.data;
|
|
|
|
// ❌ No keys
|
|
cx.render(rsx! {
|
|
ul {
|
|
data.values().map(|value| rsx!(
|
|
li { "List item: {value}" }
|
|
))
|
|
}
|
|
});
|
|
|
|
// ❌ Using index as keys
|
|
cx.render(rsx! {
|
|
ul {
|
|
cx.props.data.values().enumerate().map(|(index, value)| rsx!(
|
|
li { key: "{index}", "List item: {value}" }
|
|
))
|
|
}
|
|
});
|
|
|
|
// ✅ Using unique IDs as keys:
|
|
cx.render(rsx! {
|
|
ul {
|
|
cx.props.data.iter().map(|(key, value)| rsx!(
|
|
li { key: "{key}", "List item: {value}" }
|
|
))
|
|
}
|
|
})
|
|
// ANCHOR_END: iter_keys
|
|
}
|