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

Question

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

导航是一个对象数组。几个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 -components代码：）

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"
    },

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

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

Answer 1

我们需要更多代码（例如调用您所发布的内容），但看起来像是遍历了链接数组。

为什么不像onClick和linkOnClick那样使链接的link函数具有一个值（例如，称为isExterenal），而仅将其用于onClick？

您需要发布更多代码，但是您将得到类似：onclick={ (e) => linkOnClick(e)}。