React 箭头函数组件使用泛型

最新推荐文章于 2024-06-19 08:03:07 发布
最新推荐文章于 2024-06-19 08:03:07 发布
阅读量3.9k 收藏 3
点赞数 2
分类专栏： 遇到的错误
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33051709/article/details/118487227
版权
本文探讨了在使用TypeScript时遇到的泛型问题，特别是箭头函数使用泛型导致的编译错误。错误源于TS与JSX语法的冲突。解决办法包括在函数声明中使用`<T>`或添加`extends React.Component<T, any>`。对于React组件，介绍了如何配合泛型实现更灵活的类型约束。
摘要由CSDN通过智能技术生成

当使用function使用泛型时，ts不会报错

在这里插入图片描述

当使用箭头函数使用泛型时，ts会报错

在这里插入图片描述

出现原因及解决办法

在线上编译时可以的在这里插入图片描述

因为和 JSX 语法冲突

解决办法如下

在这里插入图片描述
或者 添加 extends
在这里插入图片描述
react 组件配合泛型
在这里插入图片描述

百里登风
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
什么是React.FC| 组件接受属性props有什么用 | ant design 封装独立弹框组件之-修改密码弹框组件
西京刀客
01-04 1515
React提供了一个组件类型React.FunctionComponent，可简写React.FC。
React + TypeScript 实现泛型组件
大灰狼的小绵羊哥哥的博客
10-12 3573
泛型类型 TypeScript 中，类型（interface, type）是可以声明成泛型的，这很常见。 interface Props<T> { content: T; } 这表明Props接口定义了这么一种类型： 它是包含一个content字段的对象 该content字段的类型由使用时的泛型T决定 type StringProps = Props&...
通过三个实例掌握如何使用 TypeScript 泛型创建可重用的 React 组件
最新发布
前端达人
06-19 970
在前端开发中，React 组件是我们日常开发的基础，而使用 TypeScript 泛型能让这些组件更加灵活和可重用。今天我们就来聊聊如何利用 TypeScript 泛型创建可重用的 React 组件。在深入具体操作之前，先简单介绍一下泛型的概念。泛型允许你在定义组件时不指定具体的数据类型，而是在使用组件时再指定具体的类型。这样一来，我们的组件就能够适应多种数据类型，不必为每种数据类型分别创建不同的...
web前端培训React 泛型组件
weixin_45695430的博客
04-22 421
以下文章来源于方应杭讲编程 案例 假设我们要做一个很简单的 Show 组件，用法如下： <Show content="hi" onClick={c => console.log(c)} /> Show 组件会展示 content，并在用户点击 content 时把 content 传给 onClick。 因此代码中的 c 和 content 总是相等的。 你会如何实现 Show 组件呢？假设你是这么写的： interface Props{ content.
React 组件定义（泛型）
WebDog—王西西
12-06 1519
interface Prop<RowType> { list: RowType[] renderItem: (row: RowType, index: number) => JSX.Element } <RowType extends any>( props: Prop<RowType> & { ref?: React.Ref<Refs> } ) => JSX.Element
React----函数组件和类组件
火山的博客
01-11 555
函数组件使用React.FC泛型定义属性类型，而类组件则使用泛型参数。在函数组件中，属性类型是直接传递给函数的泛型参数，而在类组件中，属性类型是作为类的泛型参数传递的。
浅谈箭头函数写法在ReactJs中的使用
10-19
然而，直接在React组件内部使用箭头函数可能会遇到编译错误，因为默认情况下，React项目可能不支持ES6及以上的特性，比如箭头函数。 在ES6中引入的箭头函数，其语法结构简洁明了，例如： ```jsx handleSubmit = ()...
海洋世界：我玩得很开心的React应用程序，使用箭头键移动Steve = D
02-11
React事件处理与HTML原生事件处理有所不同，它使用的是小驼峰命名法，并且事件处理函数通常定义在组件的类方法中。在这个游戏中，开发者可能创建了一个事件监听器，捕获键盘的箭头键事件，然后更新Steve的位置状态，...
react.js完整项目
11-29
1. **ES6**：也称为ECMAScript 2015，是JavaScript语言的一个重要版本更新，引入了许多新特性，如类和模块系统、箭头函数、解构赋值、模板字符串等。在React开发中，ES6的语法使得代码更简洁、易读，提高了开发效率...
react
Jasmin博客
05-27 1124
面试
【React】React 组件
Jessieeeeeee的博客
06-24 1440
React 组件
ts中箭头函数用泛型表示,6种方法
热门推荐
weixin_45389051的博客
06-26 2万+
直接上代码 const foo = <T,>(x: T): T => x; const foo = <T extends {}>(x: T): T => x; const foo = <T extends Record<string, unknown>>(x: T): T => x; const foo: <T>(x: T) => T = x => x; const identity = <T,>
typescript箭头函数参数_TypeScript泛型详解(一)
weixin_42553471的博客
02-04 4610
泛型泛型(Generics)是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。示例我们先实现一个student方法获取不同属性来看看使用：JavaScript实现//定义学生的属性获取方法，一个返回字符串类型的name一个返回number类型的年龄let itemFun = {getName: (name)=>{return name||"Tom";}...
使用 箭头函数 + ts 定义泛型函数时，编译错误的原因及解决方法
listener_life的博客
05-19 1807
箭头函数 + ts 定义泛型函数时，编译错误的原因及解决方法
TypeScript基础知识（三）函数和泛型
青轩桃李能几何，流光欺人忽蹉跎
08-07 737
上面的代码中，使用let关键字声明了一个变量add，并使用函数类型来指定变量的类型。接着，将一个函数赋值给add变量，该函数接受两个number类型的参数，并返回一个number类型的结果。泛型类与泛型函数和泛型接口类似，可以在类的定义中使用类型参数，以便在类的成员中使用这个类型。通过使用剩余参数，你可以方便地处理任意数量的参数，而无需在函数声明中显式列出每个参数。在TypeScript中，函数类型包含两部分：参数列表的类型和返回值的类型。另外，我们还可以在函数定义时指定多个类型参数，使用逗号分隔。
react+typescript正确的开发姿势之函数式组件
追风Programer的博客
01-15 2308
函数式组件声明 使用typescript正确的声明react函数式组件是通常有三种：直接声明、React.FC 和 PropsWithChildren。 直接声明 直接声明函数式组件的code如下： import React from 'react'; type HomePropsType = { name: string; age: number; children?: React.ReactNode; } const Home = (props: HomePropsType) =
react 箭头函数组件
07-28
回答: 在React中，箭头函数组件是一种用于定义无状态组件的简洁语法。它们通常用于只有一个render方法的组件，没有自己的状态或生命周期方法。箭头函数组件的定义方式类似于函数表达式，使用箭头函数语法来定义组件。由于箭头函数没有自己的this，它的函数体中使用的this实际上是继承自定义它时所在的普通函数的this。这意味着箭头函数组件中的this将指向父级组件的this，或者如果定义在全局范围内，则指向全局对象window/undefined。\[1\] 在使用箭头函数组件时，需要注意一些性能问题。如果将箭头函数作为prop传递给子组件，子组件可能会进行额外的重新渲染。为了避免这种性能问题，通常建议使用class组件的语法来定义组件。\[2\] 另外，需要注意的是，箭头函数无法直接通过显示绑定修改this指向。但可以通过修改外层函数的this指向来间接修改箭头函数的this。\[3\] 总结来说，箭头函数组件是一种简洁的定义无状态组件的语法，它继承自父级组件的this，并且需要注意性能问题和无法直接修改this指向的限制。 #### 引用[.reference_title] - *1* *3* [react组件中箭头函数的使用](https://blog.csdn.net/weixin_39289876/article/details/122534211)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [在React的render方法中使用箭头函数](https://blog.csdn.net/wu_xianqiang/article/details/109187963)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值