是否可以将多个功能传递给导航项？

Posted 2023-02-25

【中文标题】是否可以将多个功能传递给导航项？

【英文标题】：Is it possible to pass multiple functions to navigation items?

【发布时间】：2020-10-01 00:02:15

【问题描述】：

我对 React.js 很陌生，我需要在汉堡菜单中添加一个注销链接。在父组件中，已经为所有 NavLinks 定义了一个 onClick 函数，但是我在那里有一个新的注销按钮，需要将它传递给注销函数。我不太确定如何实现这一目标。我尝试了几种我想到的方法，但它们要么在加载导航时立即被触发，要么使组件崩溃。

Nav 是一个对象数组。一些 NavLink 项目仅在移动设备尺寸上可见，并且我已经开始使用该部分，但是如何使注销链接仅在单击该特定项目时才有效？

感谢任何帮助。

   return (
  <li className=liClassnames>
    <OTNavLink
      activeClassName="is-active"
      disabled=disabled
      link=link
      isExternal=isExternal
      to=link
      className=linkClassNames
      /*onClick=(e) =>          // This code was here originally
        toggleNavigation(e);
      */
        onClick=(e) =>           // And this is how I last tested whether altering this 
          SessionUtils.logout(e);  // changes the links behaviour
                                 // it naturally did for all the links
      ...linkAttributes
    >

这是您询问的 OTNavLink 组件代码 :)

const OTNavLink = (props) => 


let link, isExternal = false, disabled, children,  ...rest = props;

  let restForAnchor = omit(rest,["activeClassName", "disabled", "to"]);
  if (disabled) 
    return (
      <a ...restForAnchor>
        children
      </a>
    )
  

  // unwrap link (this should be unnecessary but applies to some cases)
  let _link = isEmpty(link) ? "javascript:void();" : isFunction(link) ? link() : link;

  if (isExternal) 
    return (
      <a
        href=_link
        ...restForAnchor
      >
        children
      </a>
    )
   else 
    return (
      <NavLink
        to=_link
        ...rest
      >
        children
      </NavLink>
    )
  
;

下面是 NavigationItems 数组的示例： 它由多个相似的对象组成。有些在移动设备上呈现并隐藏在桌面上。

  let navigationItems = [
    
      message: "navigation.timeline",
      disabled: false,
      icon: 
        type:"custom",
        name:"my-name"
      ,
      link: "/timeline",
      key: "timeline"
    ,

如何将不同的函数调用传递给最后一个注销链接？

如果您需要更多详细信息，请告诉我:)

【问题讨论】：

欢迎来到SO @JTL，你也可以分享OTNavLink代码吗？

【参考方案1】：

我想我最终自己解决了一个问题。一直都是那么简单。虽然有人可以告诉我是否有更好的方法。 :)

我刚刚在自定义组件中进行了三元检查，因此它将仅适用于具有该消息属性的链接。

onClick=this.props.message === 'logout' ? (e) => SessionUtils.logout(e) : (e) => 
            toggleNavigation(e);