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

【问题标题】：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代码吗？

标签： javascript reactjs logout

【解决方案1】：

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

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

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

【讨论】：