列表渲染

动态列表

let items: Signal<Vec<String>> = use_signal(|| {
    vec!["Learn Rust".to_string(), "Build UI".to_string()]
});
let items_updater: Signal<Vec<String>> = items;

rsx! {
    ul {
        {render_items(items)}
    }
}

渲染列表函数

fn render_items(items: Signal<Vec<String>>) -> VirtualNode {
    let item_list: Vec<String> = items.get();
    let mut children: Vec<VirtualNode> = Vec::new();
    for (index, item) in item_list.iter().enumerate() {
        let item_clone: String = item.clone();
        let index_clone: usize = index;
        let node: VirtualNode = rsx! {
            li {
                key: index_clone.to_string()
                item_clone
            }
        };
        children.push(node);
    }
    VirtualNode::Fragment(children)
}

提示

使用 key 属性帮助 diff 算法识别列表项，减少不必要的 DOM 操作。

添加项目

let items: Signal<Vec<String>> = use_signal(|| Vec::new());
let items_updater: Signal<Vec<String>> = items;
let new_item: Signal<String> = use_signal(|| "".to_string());
let new_item_updater: Signal<String> = new_item;

button {
    onclick: move |_event: NativeEvent| {
        let text: String = new_item_updater.get();
        if !text.trim().is_empty() {
            let mut current: Vec<String> = items_updater.get();
            current.push(text);
            items_updater.set(current);
        }
    }
    "Add"
}

删除项目

let items_remove: Signal<Vec<String>> = items;
let index_clone: usize = index;

button {
    onclick: move |_event: NativeEvent| {
        let mut current: Vec<String> = items_remove.get();
        if index_clone < current.len() {
            current.remove(index_clone);
            items_remove.set(current);
        }
    }
    "Remove"
}

加载中...