将 Link 组件与 ListItem 和 Typescript 结合使用

2024-04-09

我正在使用material-ui v3.5.1

我想让 ListItem 使用 Link 组件,如下所示:

<ListItem component={Link} to="/some/path">
  <ListItemText primary="Text" />
</ListItem>

但是 Typescript 向我显示了一条冗长的错误消息(“组件”一词在 VSCode 中突出显示),底部显示:

The type "typeof Link" cannot be assigned to the type "ComponentClass<ListItemProps, any>"

Property 'to' is missing in type 'ListItemProps' but required in type 'Readonly'. [2322]

是否有解决方法可以使此类内容与 Typescript 一起使用?

Thanks!


这是目前我们类型声明的限制(直到我们转向通用属性)。作为临时解决方法,您可以将链接提取到另一个组件中,例如

function SomePathLink(props: ButtonBaseProps) {
  return <Link to="/some/path" {...props} />
}

<ListItem component={SomePathLink}>
  <ListItemText primary="Text" />
</ListItem>

文档中更详细的解释:https://material-ui.com/demos/buttons/#third-party-routing-library https://material-ui.com/demos/buttons/#third-party-routing-library

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 Link 组件与 ListItem 和 Typescript 结合使用 的相关文章

  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • TypeScript 第 3 阶段字段装饰器

    我目前正在尝试将字段装饰器从实验性 TypeScript 更新到第 3 阶段 它所做的只是在字段值更新时发送通知 旧的实现如下所示 function watchChange
  • 您在 javascript Web 应用程序中使用的第三方 API ApiKey 存储在哪里?

    如何以及在何处存储您在 javascript Web 应用程序中使用的第三方 API ApiKey 又名 AppId AppSecret AppKey 如果它用于获取 URL 并且在浏览器网络选项卡中可见 我是否应该对其保密 示例 在我的
  • React PropTypes 与 Flow

    PropTypes 和 Flow 涵盖相似的内容 但使用不同的方法 PropTypes 可以在运行时向您发出警告 这有助于快速找到来自服务器等的格式错误的响应 但是 Flow 似乎是未来 并且具有泛型等概念 是一个非常灵活的解决方案 Nuc
  • 在 Angular 中使用 Vue 组件

    我有一个用 Vue 构建的项目 我想在 Angular 应用程序中重用 Vue 应用程序中的组件 这样我就不必从头开始重建每个组件 我在medium上看到了这个教程 如何在 Angular 应用程序中使用 Vue 2 0 组件 https
  • Typescript Map 在使用其函数时抛出错误(mapobject.keys() 不是函数)

    我是 typescript 中的新蜜蜂 在我的 angular4 项目中 我收到一个 json 形式的地图对象 所以我声明了一个如下所示的类
  • 如何在React中的Material-UI选择框中设置默认值?

    我在用选择框 https material ui com demos selects 来自材料用户界面 我想显示默认选择的 选择值 选项 但之后用户无法选择此选项
  • 将迭代器结果键入元组

    有没有办法指定迭代器的类型 以便接收者知道迭代器生成一个元组 这样我就可以做这样的事情 class Vector2 components number number Symbol iterator yield this components
  • 打字稿:“找不到模块”且输入有效

    我刚刚使用 typescript 启动了一个新的 Nodejs 项目 我安装了打字 https github com typings typings https github com typings typings 并使用它来安装 Node
  • 带千位分隔符的输入掩码 ionic 3

    我需要一个thousand separator input mask指令或其他Ionic 3应用程序 我已经尝试了 2 个指令 但他们都没有工作 你知道这方面的工作指令吗 e g 50 000 html
  • useLocation 挂钩 - 确定过去的位置

    根据 React Router 5 1文档 https v5 reactrouter com web api location应该可以看到 应用程序现在在哪里 你想让它去哪里 甚至它曾经在哪里 在我的应用程序中 我需要查看 它在哪里 我访问
  • React-redux useDispatch() 未捕获类型错误

    我正在尝试创建一个简单的组件来使用 React Redux 钩子分派操作useDispatch 我收到一个错误 我已将组件修剪到发生错误的位置 当调用 useDispatch 函数时会发生这种情况 import useDispatch fr
  • 仅显示某些路由的组件 - React

    我正在 React 中开发一个带有登录界面的网站 该网站显示一个自定义导航组件 但是我不希望它显示在主路线 即登录页面 上 但据我了解 静态组件不会在路线更改时重新呈现 这准确吗 我正在使用 React Router 来处理所有路由 这是我
  • 有没有办法让 React 为孩子自动定义“键”?

    我正在学习 React 我偶然发现了 动态儿童 的这个怪癖 带有代码示例的序言 Render Pass 1
  • Typescript 函数返回类型取决于参数的数量或类型

    假设我有一个函数 它应该根据参数的数量和类型返回不同的类型 我该如何在 TypeScript 中描述这一点 function foo t number string function foo t number s string boolea
  • 更改离子搜索栏的占位符和清晰图标颜色不是全局的吗?

    我有两个离子搜索栏 我只需要更改其中之一的占位符和清除图标颜色
  • 我如何断言某个元素不在剧作家的页面上?

    我正在测试一个包含徽标的网站 并且我想确保该徽标不会出现在某些页面上 如何断言某个元素不存在 我检查了剧作家断言文档 https playwright dev docs assertions 但它只有检查确实存在的事物的示例 async a
  • 如何获取使用 .map 渲染的第一个元素的 ref?

    我需要在几行中显示视频 卡片 的缩略图 并重点关注第一个缩略图 我使用嵌套地图进行了显示 该代码基本上迭代视频数组并返回多行视频 我们如何关注第一个渲染的元素 我认为我们需要获得第一个要聚焦的元素的引用 但是我们如何在这里设置 ref 并在
  • React Native - 跨屏幕传递数据

    我遇到了一些麻烦react native应用程序 我不知道如何跨屏幕传递数据 我意识到还有其他类似的问题在 SO 上得到了回答 但是这些解决方案对我来说不起作用 我正在使用StackNavigator 这是我的设置App js file e
  • 如何更改订阅值?使用 rxJS

    我正在创建一个计时器 需要你的帮助 我刚刚学习 Angular 和 rxJS 对此我有一些疑问 我正在创建一个具有启动 停止 暂停 重置功能的计时器 并且 btn Reset 必须将我的计时器 暂停 到 300 毫秒 怎么做 D 我的启动定

随机推荐