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

Posted 2023-02-22

【中文标题】使用 React 和 Semantic-Ui 更新菜单中的活动项

【英文标题】：Update active item in menu with React and Semantic-Ui

【发布时间】：2020-11-16 10:10:30

【问题描述】：

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

return (
            <div className="ui menu">
                <Link to="/">
                    <img 
                    style=
                        padding: 20
                    
                    className="ui image" 
                    src=Rmarketingv1
                    
                    />
                </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>
        );

【参考方案1】：

React 路由器具有 <NavLink> 属性，该属性具有 activeClassName 属性。所以为了让事情顺利进行，请像这样更改您的<Links>：

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

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

【参考方案2】：

您可以只使用NavLink 而不是Link。你可以给它一个activeClassName 属性，只要路由匹配to 属性，className 就会被添加到那个链接中。

在此处阅读文档：https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md

【讨论】：

我将如何准确地实施这个？

只需导入 NavLink 并使用它而不是 Link，并添加一个 activeClassName="some-semantic-ui-class"。或者，如果您想添加自己的样式，请添加自定义类并转到您的样式文件并编写一些 css 来设置该类名的样式。