添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

挺简单的,刚好最近写的一个组件使用到了泛型,主要是给 Props 使用,可以看看这个🌰例子:

  1. 先定义 Props 接口:
interface Props<LabelType extends string = string> extends CommonProps {
  tabItems: Array<{
    label: LabelType;
  selectedTab: LabelType;
  setSelectedTab: Dispatch<SetStateAction<LabelType>>;
  1. 再定义组件函数:
export default function SlideTabs<LabelType extends string = string>({
  tabItems,
  selectedTab,
  setSelectedTab,
}: Props<LabelType>): React.ReactElement {
	//...
  1. 接着在引用组件上传递泛型:
 <SlideTabs<ResourceType>
   {...{ tabItems, selectedTab, setSelectedTab }}

REFERENCE

[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 元素