如何激活导航抽屉中的链接答案

【问题标题】：How to activate the links in Navigation Drawer如何激活导航抽屉中的链接
【发布时间】：2017-10-16 12:43:47
【问题描述】：

我已经定义了以下导航抽屉：

<Drawer
    id="homepage-drawer"
    type={Drawer.DrawerTypes.TEMPORARY}
    visible={visible}
    position={position}
    overlay
    clickableDesktopOverlay={true}
    onVisibilityToggle={this.handleVisibility}
    navItems={item}
    defaultMedia={'desktop'}
    onClick={this.handleAction.bind(this)}
    header={(
        <Toolbar
            nav={isLeft ? null : closeBtn}
            actions={isLeft ? closeBtn : null}
            className="md-divider-border md-divider-border--bottom"
        />
    )}
/>

以下是我的 navItems 列表：

const item = ["About", "Contact Us", "FAQ", "Privacy Policy", "Logout"]

我希望每当我单击以下选项卡时，相应的链接应该会打开，我正在尝试使用 onClick 事件执行此操作，但没有任何反应。

【问题讨论】：

标签： reactjs navigation

【解决方案1】：

创建一个像这样的字典：

const dictionary = {
     about: {
         name: "About",
         link: "/about"
     },
     contact : {
         name : "Contact Us",
         link : "/contact_us"
     },
     faq : {
         name : "FAQ",
         link : "/faq"
     },
     privacy : {
         name : "Privacy Policy",
         link : "/privacy_policy"
     },
     logout : {
         name : "Logout",
         link : "/logout"
     }
}

然后在你的数组上运行一个 for 循环并返回，

<a href = {dictionary.about.link}>{dictionary.about.name}</a>

【讨论】：