docs: update local examples and docs to support new syntaxes

This commit is contained in:
Jonathan Kelley committed 2021-12-15 15:56:53 -05:00
1 parent e495b09bf1
commit 4de16c4779
118 files changed
+520 -1154

No files matched your search

+12 -12
View File
@@ -32,14 +32,14 @@ use dioxus::prelude::*;
struct NoKeysProps {
data: std::collections::HashMap<u32, String>,
}
static AntipatternNoKeys: FC<NoKeysProps> = |cx, props| {
static AntipatternNoKeys: Component<NoKeysProps> = |cx| {
// WRONG: Make sure to add keys!
rsx!(cx, ul {
{props.data.iter().map(|(k, v)| rsx!(li { "List item: {v}" }))}
{cx.props.data.iter().map(|(k, v)| rsx!(li { "List item: {v}" }))}
});
// RIGHT: Like this:
rsx!(cx, ul {
{props.data.iter().map(|(k, v)| rsx!(li { key: "{k}", "List item: {v}" }))}
{cx.props.data.iter().map(|(k, v)| rsx!(li { key: "{k}", "List item: {v}" }))}
})
};
@@ -54,7 +54,7 @@ static AntipatternNoKeys: FC<NoKeysProps> = |cx, props| {
///
/// Only Component and Fragment nodes are susceptible to this issue. Dioxus mitigates this with components by providing
/// an API for registering shared state without the ContextProvider pattern.
static AntipatternNestedFragments: FC<()> = |cx, props| {
static AntipatternNestedFragments: Component<()> = |cx| {
// Try to avoid heavily nesting fragments
rsx!(cx,
Fragment {
@@ -82,8 +82,8 @@ static AntipatternNestedFragments: FC<()> = |cx, props| {
/// However, calling set_state will *not* update the current version of state in the component. This should be easy to
/// recognize from the function signature, but Dioxus will not update the "live" version of state. Calling `set_state`
/// merely places a new value in the queue and schedules the component for a future update.
static AntipatternRelyingOnSetState: FC<()> = |cx, props| {
let (state, set_state) = use_state(cx, || "Hello world").classic();
static AntipatternRelyingOnSetState: Component<()> = |cx| {
let (state, set_state) = use_state(&cx, || "Hello world").classic();
set_state("New state");
// This will return false! `state` will *still* be "Hello world"
assert!(state == &"New state");
@@ -99,7 +99,7 @@ static AntipatternRelyingOnSetState: FC<()> = |cx, props| {
/// - All components must start with an uppercase character
///
/// i.e.: the following component will be rejected when attempted to be used in the rsx! macro
static antipattern_component: FC<()> = |cx, props| todo!();
static antipattern_component: Component<()> = |cx, props| todo!();
/// Antipattern: Misusing hooks
/// ---------------------------
@@ -120,11 +120,11 @@ static antipattern_component: FC<()> = |cx, props| todo!();
struct MisuedHooksProps {
should_render_state: bool,
}
static AntipatternMisusedHooks: FC<MisuedHooksProps> = |cx, props| {
static AntipatternMisusedHooks: Component<MisuedHooksProps> = |cx| {
if props.should_render_state {
// do not place a hook in the conditional!
// prefer to move it out of the conditional
let (state, set_state) = use_state(cx, || "hello world").classic();
let (state, set_state) = use_state(&cx, || "hello world").classic();
rsx!(cx, div { "{state}" })
} else {
rsx!(cx, div { "Not rendering state" })
@@ -153,7 +153,7 @@ static AntipatternMisusedHooks: FC<MisuedHooksProps> = |cx, props| {
/// }
/// }
/// })
static _example: FC<()> = |cx, props| todo!();
static _example: Component<()> = |cx, props| todo!();
/// Antipattern: publishing components and hooks with all features enabled
/// ----------------------------------------------------------------------
@@ -171,9 +171,9 @@ static _example: FC<()> = |cx, props| todo!();
///
/// This will only include the `core` dioxus crate which is relatively slim and fast to compile and avoids target-specific
/// libraries.
static __example: FC<()> = |cx, props| todo!();
static __example: Component<()> = |cx, props| todo!();
pub static Example: FC<()> = |cx, props| {
pub static Example: Component<()> = |cx| {
cx.render(rsx! {
AntipatternNoKeys { data: std::collections::HashMap::new() }
AntipatternNestedFragments {}