有没有办法在打字稿中输入 React 路由器 NavLink 的 isActive 函数

Question

 <MenuItem
          component={NavLink}
          to={to}
          key={text}
          selected={selectedNavIndex === index}
          **// compiler complaining about match of any type**
          isActive={match => {
            if (match) {
              onNavSelectHandler(index);
              return true;
            } else {
              return false;
            }
          }}
        >
          <StyledListItemIcon>
            <StyledIcon as={icon} width={width} />
          </StyledListItemIcon>
          {text && isOpen && <ListItemText primary={text} />}
        </MenuItem>

我正在尝试在打字稿项目中使用react-router的isActive功能，但我无法正确输入...

Answer 1

react-router-dom NavLink 组件的 isActive 属性定义如下：

export interface NavLinkProps<S = H.LocationState> extends LinkProps<S> {
    isActive?<Params extends { [K in keyof Params]?: string }>(match: match<Params> | null, location: H.Location<S>): boolean;
...

source link

您可以导入这个 match 类型（奇怪的是小写）并像这样使用它：

import {NavLink, match as Match} from "react-router-dom";

<MenuItem
...
  isActive={(match: Match | null) => {
    if (match) {
      onNavSelectHandler(index);
      return true;
    } else {
      return false;
    }
  }}
>