我认为LinkProps是一种props ,但我不知道指定省略<RouterLinkProps‘to’>意味着什么.请告诉我.

import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
import { LinkProps } from '@mui/material/Link';

const LinkBehavior = React.forwardRef<
  HTMLAnchorElement,
  Omit<RouterLinkProps, 'to'> & { href: RouterLinkProps['to'] }
>((props, ref) => {
  const { href, ...other } = props;
  // Map href (MUI) -> to (react-router)
  return <RouterLink ref={ref} to={href} {...other} />;
});

参考site:.https://mui.com/material-ui/guides/routing/

推荐答案

Omit<RouterLinkProps, 'to'>只是从react-router-dom Link组件的props 类型定义中删除toprops .有关更多详细信息,请参见Omitting Keys.

LinkProps

export interface LinkProps
  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
  reloadDocument?: boolean;
  replace?: boolean;
  state?: any;
  to: To; // <-- removes this prop
}

类型的其余部分有效地将toprops 移动到hrefprops .

Omit<RouterLinkProps, 'to'> & { href: RouterLinkProps['to'] }

它应该会产生如下类型:

export interface LinkProps
  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
  reloadDocument?: boolean;
  replace?: boolean;
  state?: any;
  href: To;
}

Reactjs相关问答推荐

CSS转换不适用于React MUI对象

如何在没有 node 模块的情况下利用外部Java脚本文件制作OWL carousel

404使用GitHub操作部署Next.js应用程序时出错

如何在React中的textarea中显示字符数?

在url中使用MongoDB对象ID被认为是不好的做法?

带有样式的工具提示导致无法向功能组件提供参考警告

react -无法获取函数的最新参数值

取消 Select 较高组件中的所有行

当我无法引用模态组件时,如何使模态组件在 Next.js/React 中管理自己的状态?

在 React 中是否有任何理由要记住 Redux 操作创建者?

console.logs 没有显示在浏览器控制台上,但显示在我的终端上

React useEffect 依赖项

ReactJS on AWS Amplify与EC2上的Spring boot服务之间的混合内容错误

我应该使用 useEffect 来为 React Native Reanimated 的 prop 值变化设置动画吗?

当从数组中删除数据时,UseEffect 不会重新渲染,仅在添加数据时才会重新渲染

当用户输入相同信息时如何禁用更新

具有自动完成功能的 Formik material ui 无法按预期工作

将 Material UI 菜单渲染为

如何从 extrareducer redux 更改对象中元素的值

为什么 state redux-toolkit 是代理?