时间戳

首页 > 解决方案 > 使用 React 和 Semantic-Ui 更新菜单中的活动项

reactjs - 使用 React 和 Semantic-Ui 更新菜单中的活动项

问题描述

如何将菜单中的项目更改为活动项目？目前，第一项“主页”始终设置为活动项。目标是，如果我单击其他项目，则该项目将设置为活动状态，而另一个项目将不再处于活动状态。

return (
            <div className="ui menu">
                <Link to="/">
                    <img 
                    style={{
                        padding: 20
                    }}
                    className="ui image" 
                    src={Rmarketingv1}
                    alt="alt"
                    />
                </Link>
                <div 
                    style={{
                        margin: 40
                    }}
                    className="ui borderless horizontal right secondary menu"
                    >
                    <div className="active item">
                        <Link to="/">
                            <h2>
                                Home
                            </h2>
                        </Link>
                    </div>
                    <div className="item">
                        <Link to="/Service">
                            <h2>
                                Tjenester
                            </h2>
                        </Link>
                    </div>
                    <div className="item">
                        <Link to="/work">
                            <h2>
                                Jobbmuligheter
                            </h2>
                        </Link>
                    </div>
                    <div className="item">
                        <Link to="/contact">
                            <h2>
                                Kontakt
                            </h2>
                        </Link>
                    </div>
                </div>
            </div>
        );

标签： reactjsjsxsemantic-uireact-router-dom

解决方案

React 路由器的<NavLink>特征是具有属性的activeClassName属性。因此，要使事情正常进行，请<Links>像这样更改您的：

<div className="item">
    <NavLink to="/" activeClassName="active">
        <h2>
            Home
        </h2>
    </NavLink>
</div>

免责声明：这会将“活动”类设置为您的元素，而不是像上面示例中的 div。确保也调整css代码！

推荐阅读