docs: update local examples and docs to support new syntaxes
This commit is contained in:
1 parent
e495b09bf1
commit
4de16c4779
118 files changed
+520
-1154
No files matched your search
@@ -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 {}
|
||||
|
||||
Reference in new issue
Block a user