挺简单的，刚好最近写的一个组件使用到了泛型，主要是给 Props 使用，可以看看这个🌰例子：
-
先定义 Props 接口：
interface Props<LabelType extends string = string> extends CommonProps {
tabItems: Array<{
label: LabelType;
selectedTab: LabelType;
setSelectedTab: Dispatch<SetStateAction<LabelType>>;
- 再定义组件函数：
export default function SlideTabs<LabelType extends string = string>({
tabItems,
selectedTab,
setSelectedTab,
}: Props<LabelType>): React.ReactElement {
- 接着在引用组件上传递泛型：
<SlideTabs<ResourceType>
{...{ tabItems, selectedTab, setSelectedTab }}
[1] Passing Generics to JSX Elements in TypeScript
React.forwardRef传递泛型参数
使用React函数组件开发的过程中会遇到父组件调用子组件的方法或者属性的场景，首次先说怎么通过React.forwardRef来将子组件的属性或者方法暴露给父组件
使用forwardRef暴露组建的方法和属性
import { Box, Typography } from "@mui/material";
import { forwardRef, useImperativeHandle } from "react";
interface Locat
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概述：脚手架的使用:合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入
React 的特点： 声明式、基于组件、学习一次，随处使用
脚手架的使用:
脚手架是开发 现代 Web 应用的必备
充分利用 Webpa
forwardRef是一个可以将
组件内的ref对外暴露的高阶
组件，当你的
组件需要对外暴露
元素的Ref，或者想对外暴露某些内部方法，就可以使用这个 （对应vue3的 expose 方法）
但是当forwardRef与TypeScript
泛型组件结合时，会出现
泛型丢失的问题 （传入
泛型无效）
对这个问题，网上有许多解决方法，比如 定义 global.d.ts 等，但是感觉都不够高效，现在给大家带来我的解决方法
主要思路就是创建一个高阶
组件，继承原
在
React 中，
组件的方法返回值类
型应该在方法声明时使用 TypeScript 进行类
型定义。例如，如果你有一个
组件方法叫做 `render`，它返回一个
JSX 元素，你可以这样定义它的返回值类
型：
```typescript
class MyComponent extends
React.Component {
render():
JSX.Element {
return <div>Hello, World!</div>;
在函数
组件中，可以使用 `
React.FC`
泛型类
型来定义
组件的 props 和返回值类
型。例如：
```typescript
interface MyComponentProps {
name: string;
const MyComponent:
React.FC<MyComponentProps> = ({ name }) => {
return <div>Hello, {name}!</div>;
这里我们使用 `
React.FC<MyComponentProps>` 来定义这个
组件。它告诉 TypeScript `MyComponent` 是一个函数
组件，它接收一个 `MyComponentProps` 类
型的参数，并且返回一个
JSX 元素。
