component 属性宏

使用方式

使用 #[component] 属性宏标记函数组件，html! 宏在编译时扫描项目源码查找所有 #[component] 标记的函数，将其识别为自定义组件：

use euv_macros::*;

#[derive(Default)]
struct MyCardProps {
    title: &'static str,
    children: VirtualNode,
}

#[component]
pub fn my_card(node: VirtualNode<MyCardProps>) -> VirtualNode {
    let MyCardProps { title, children, .. } = node.try_get_props().unwrap_or_default();
    html! {
        div {
            h3 { title }
            children
        }
    }
}

提示

#[component] 属性宏本身是透传的（不会修改函数体），但它是 html! 宏识别组件的必要标记。只有被 #[component] 标记的函数才会在 html! 宏中作为组件标签使用，未标记的标识符一律被视为原生 HTML 元素。

组件属性映射

当 html! 宏识别到标签为组件时，属性名直接映射到 Props 结构体的字段名：

#[derive(Default)]
struct MyInputProps {
    on_change: Option<Rc<dyn Fn(Event)>>,
    on_submit: Option<Rc<dyn Fn(Event)>>,
    data_id: &'static str,
    children: VirtualNode,
}

#[component]
pub fn my_input(node: VirtualNode<MyInputProps>) -> VirtualNode {
    let MyInputProps { on_change, on_submit, data_id, .. } = node.try_get_props().unwrap_or_default();
    html! {
        input {
            oninput: on_change
            data_id: data_id
        }
    }
}

使用：

html! {
    my_input {
        on_change: my_handler
        on_submit: my_submit_handler
        data_id: "123"
    }
}

提示

组件属性名直接对应 Props 结构体字段名。html! 宏自动将属性值映射到结构体字段，未传递的字段使用 Default::default() 填充。回调属性类型为 Option<Rc<dyn Fn(Event)>>，字段名使用 on 前缀格式（如 onclick、on_change）。

加载中...