首页 > 其他分享 >[React Typescript] Generics in Class Component

[React Typescript] Generics in Class Component

时间:2023-08-12 16:23:12浏览次数:38  
标签:rows Component React Typescript props row

interface TableProps<T> {
  rows: T[];
  renderRow: (row: T) => ReactNode;
}

export class Table<T> extends React.Component<TableProps<T>> {
  render(): ReactNode {
    return (
      <table>
        <tbody>
          {this.props.rows.map((row) => (
            <tr>{this.props.renderRow(row)}</tr>
          ))}
        </tbody>
      </table>
    );
  }
}

 

标签:rows,Component,React,Typescript,props,row
From: https://www.cnblogs.com/Answer1215/p/17624961.html

相关文章

  • 组合式api-通过reactive和ref提供响应式数据
    在setup中如果是直接定义遍历数据并不是响应式数据,和vue2中的data选项提供的数据不一样,vue2的data中返回的数据全部都是响应式数据。<scriptsetup>//这样提供的数据并不是响应式数据,和vue2中的data选项提供的数据并不是一样。letstate=888constgetState=()=>{......
  • RN 使用react-navigation写可以滚动的横向导航条(expo项目)
     装包:yarnadd@react-navigation/material-top-tabsreact-native-tab-view npxexpoinstallreact-native-pager-view  importReactfrom'react'import{View,Text,ScrollView,SafeAreaView}from'react-native'import{Icon}from'.......
  • ❤ React06-React 组件的生命周期
    ❤React06-React组件的生命周期6-1组件的生命周期概述(1)创建时(2)更新时......
  • AbilityInputComponent,支持EnhancedInputComponent和GAS的操作映射
    目前完成进度输入系统的基本搭建​ 支持输入按键触发对应的Ability,同时支持按键的按下和释放两种状态的区分并可以在代码或蓝图中自定义特殊逻辑能力输入系统详解​ 通过配置文件来保存Action和Ability的对应关系,对应的关键词条就是GameplayTag。通过一个GameplayTag可以找到......
  • Visual Components正版软件报价 多少钱一套
    VisualComponents在模拟仿真时,可实时采集仿真数据生成数据图表。在模拟仿真中,让用户了解整线的效率,产出率,寻找自动化产线瓶颈,查看各工位的实际效率,对各个设备的实际使用率了如指掌,对成本控制相当的有帮助。还可通过API,导出excel表格,做数据分析,工艺排程等使用。①更强大:更新了软件......
  • IfcModulusOfSubgradeReactionSelect
    IfcModulusOfSubgradeReactionSelect类型定义垫层测量,表示每个区域的结构面项目的垫层。TRUE表示无限刚度(刚度)。FALSE表示无硬度(释放)。数值表示有限的线性弹性刚度。 IFC4中的新型。 EnumerationdefinitionConstantDescriptionIfcBoolean IfcModulusOfSubgrade......
  • 开心档之TypeScript String(字符串)
    TypeScriptString(字符串)目录TypeScriptString(字符串)语法String对象属性String方法String对象用于处理文本(字符串)。语法vartxt=newString("string");或者更简单方式:vartxt="string";String对象属性下表列出了String对象支持的属性:序号属性&描述实例1.constructor......
  • typeScript学习-TS类型-null和undefined
    typeScript学习null和undefinedundefinedanyunknown 可以接受undefinedletdata:undefined=undefinedletdata2:any=undefinedletdata3:unknown=undefined nullanyunknown 可以接受nullletdata4:null=nullletdata5:any=nullletd......
  • TypeScript第三章
    TypeScript是一个由微软开发的开源编程语言,它是JavaScript的超集,意味着TypeScript包含了JavaScript的所有特性,同时还提供了一些新的特性和语法糖。TypeScript可以帮助开发者在开发大型应用时提高代码可维护性、可读性和可靠性。本文将介绍TypeScript的一些进阶使用方法,并......
  • typeScript学习-TS类型-其他特殊类型-any、unknown
    typeScript学习其他特殊类型:any,unknown,never,void,元组(tuple),可变元组 any比较经典的应用场景:1、自定义守卫2、需要进行asany类型断言的场景unknown一般用作函数参数:用来接收任意类型的变量实参,但在函数内部只用于再次传递或输出结果,不获......