如何在 yew 中单击路由器链接时添加 .is-active css 类？答案

【问题标题】：Howto add .is-active css class when click Route Link in yew?如何在 yew 中单击路由器链接时添加 .is-active css 类？
【发布时间】：2022-11-21 01:40:53
【问题描述】：

这是yew中的一个简单的bulma css navbar。我的问题是如何在通过单击路由链接导航时将 .is-active 类添加到“navbar-item”？

看来我必须在这里使用一些有状态的实用程序。但是我无法拦截 Route Link 中的 onclick 事件。

use yew::prelude::*;
use yew_router::prelude::*;

use crate::routes::app_routes::AppRoutes;

#[function_component]
pub fn Nav() -> Html {
    let navbar_active = use_state_eq(|| false);

    let toggle_navbar = {
        let navbar_active = navbar_active.clone();

        Callback::from(move |_| {
            navbar_active.set(!*navbar_active);
        })
    };

    let active_class = if !*navbar_active { "is-active" } else { "" };

    html! {
        <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
            <div class="navbar-brand">
                <h1 class="navbar-item is-size-3">{ "UVW" }</h1>

                <button class={classes!("navbar-burger", "burger", active_class)}
                    aria-label="menu" aria-expanded="false"
                    onclick={toggle_navbar}
                >
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                </button>
            </div>
            <div class={classes!("navbar-menu", active_class)}>
                <div class="navbar-start">
                    <Link<AppRoutes> classes={classes!("navbar-item")} to={AppRoutes::Home}>
                        { "Home" }
                    </Link<AppRoutes>>

                    <Link<AppRoutes> classes={classes!("navbar-item")} to={AppRoutes::About}>
                        { "About" }
                    </Link<AppRoutes>>

                    <div class="navbar-item has-dropdown is-hoverable">
                        <div class="navbar-link">
                            { "More" }
                        </div>
                        <div class="navbar-dropdown">
                            <Link<AppRoutes> classes={classes!("navbar-item")} to={AppRoutes::Home}>
                                { "DropDown1" }
                            </Link<AppRoutes>>
                            <Link<AppRoutes> classes={classes!("navbar-item")} to={AppRoutes::Home}>
                                { "DropDown2" }
                            </Link<AppRoutes>>
                            <Link<AppRoutes> classes={classes!("navbar-item")} to={AppRoutes::Home}>
                                { "DropDown3" }
                            </Link<AppRoutes>>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    }
}

【问题讨论】：

标签： yew

【解决方案1】：

我还没有找到任何“官方”方法来做到这一点。但一个可能的解决方案是使用 use_route 挂钩到路由中并与之匹配。

我通过创建自己的 fn 组件来检查它是否是当前路由，从而简化了这一点。

#[derive(Properties, PartialEq)]
pub struct Props {
    pub children: Children,
    pub to: Route,
}
#[function_component(RouteLink)]
fn route_link(props: &Props) -> Html {
    let route = use_route::<Route>().unwrap_or_default();
    let classes = if route == props.to {
        classes!("text-gray-900")
    } else {
        classes!("text-gray-400")
    };

    html! {
        <Link<Route> classes={classes} to={props.to.clone()}>{for props.children.iter() }</Link<Route>>
    }
}

【讨论】：