首页 > 其他分享 >若使用的ts,子组件的props是直接解构好呢还是定义一个接口好呢?

若使用的ts,子组件的props是直接解构好呢还是定义一个接口好呢?

时间:2024-02-25 10:45:32浏览次数:27  
标签:定义 Props ts 接口 解构 函数参数 props 组件

在 TypeScript 中,定义子组件的 props 通常有以下两种方式:

  1. 接口(Interface)
// 定义一个接口来描述 Props
interface MyComponentProps {
  title: string;
  items: string[];
  onItemSelected: (item: string) => void;
}

// 在子组件中使用该接口
const MyComponent: React.FC<MyComponentProps> = ({ title, items, onItemSelected }) => (
  // 组件内容...
);

这种方式清晰地定义了组件接受的 props 结构,并且可以在整个项目中重用这个接口。它使得代码具有更好的可读性和可维护性。

  1. 解构 Props 直接在函数参数中定义类型
// 直接在子组件函数参数中定义 Props 类型
const MyComponent: React.FC<{ 
  title: string;
  items: string[];
  onItemSelected: (item: string) => void;
}> = ({ title, items, onItemSelected }) => (
  // 组件内容...
);

这种做法更加简洁,但如果你的组件 Props 复杂或者需要在多个地方复用时,可能会造成代码重复。

综合来看,推荐优先使用接口(Interface)的方式来定义 Props,这样可以更好地组织和管理类型,并支持在整个项目中共享和复用类型定义。
尤其是在大型项目或团队协作中,良好的类型组织结构有助于提升代码质量与开发效率。不过,在一些小型项目或简单组件中,直接在函数参数中定义类型也是可行的。

标签:定义,Props,ts,接口,解构,函数参数,props,组件
From: https://www.cnblogs.com/longmo666/p/18032128

相关文章

  • PropTypes 是 React 提供的一个用于类型检查的库 若使用了ts,还需要使用PropTypes吗
    在使用了TypeScript的React项目中,由于TypeScript已经提供了静态类型检查的能力,通常不需要再额外使用prop-types库进行运行时的类型检查。TypeScript在编译阶段就能通过类型注解确保组件之间的props类型正确无误,这有助于在开发阶段就发现类型不匹配的问题。而prop-ty......
  • follow-redirects 可以直接替换node http & https 的npm 模块
    follow-redirects可以直接替换nodehttp&https的npm模块包含的特性支持重定向功能支持重定向参数配置,比如最大重定向,以及最大请求大小,支持beforeredirect请求处理(比如认证处理)支持agents说明对于业务系统的请求会包含重定向场景的,follow-redirects是一个很不错的选......
  • arkts v3.2 Release 中,设置横屏方式代码
    asynchengButton(){  letscreenClass:screen.Screen|null=null;  //this.isLand=true  screen.setScreenRotationLocked(false).then(()=>{    screen.getAllScreens((err,data)=>{      if(err.code){        console.error('Failedt......
  • ssts-hospital-web-master项目实战记录十三:项目迁移-架构设计(前台管理)
    记录时间:2024-02-24前台管理 CashTradeClean.html CashTradeDetails.html CashTradeSettle.html DeviceTest.html GoodsManage.html login.html Main.html ReceiptReprint.html SystemManage.html翻译搜索复制......
  • 自定义一个QAbstractScrollArea(二)
    延续上一篇文章,本文以另一种方法实现QAbstractScrollArea。此例子是一个图片缩略图的列表控件,控件沿水平方向延伸。仅作为一个例子,因为实际的图片列表可以用QListWidget实现,并不需要自己写代码。下面是程序的运行截图:头文件:classMListWidget:publicQAbstractScrollArea{......
  • ssts-hospital-web-master项目实战记录十三:项目迁移-架构设计(适配器、设备驱动)
    记录时间:2023-02-24适配器adapter.jsadapter/adapter.ts:全部1.属性 2.函数 2.1.标准适配器 2.2.Ajax操作 adapterPOS.jsadapter-pos.ts:全部1.入口2.属性   3.函数  设备驱动devicedriver.jsdevice-driver/index.ts:全部1.以发卡机为例......
  • CF1932F Feed Cats
    现在能写了。考虑dp做法。在读入数据之后,我们下意识地对每条线段\((l_i,r_i)\)进行排序。随后经过尝试,我们可以排除以猫的编号为阶段进行dp的方案。因此我们选择以位置为阶段进行dp。设\(dp(i,0/1)\)表示位置\(i\)是否投喂能获得的最大价值。有转移方程(注意\(dp(......
  • ssts-hospital-web-master项目实战记录十二:项目迁移-架构库和插件库
    记录时间:2024-02-24架构库和插件库1.架构库(1)common.js (2)web.*.js 2.插件库待建设 一、Html项目js文件目录结构(VS2015)  二、Vue项目ts文件目录结构(VS Code)1.架构库 2.插件库   翻译搜索复制......
  • ts快速了解
    基础类型数字类型letnum1:number=100;letnum2:number=0b100;//2进制letnum3:number=0o100;//8进制letnum4:number=0x100;//16进制letnum5:number=100.88;//小数也是数字类型//类型定义好以后,不可以错误赋值//num5='abc'console.......
  • [Rust] Instantiating Classic, Tuple, and Unit structs
    https://doc.rust-lang.org/book/ch05-01-defining-structs.html structColorClassicStruct{red:i32,green:i32,blue:i32}structColorTupleStruct(i32,i32,i32);#[derive(Debug)]structUnitLikeStruct;#[cfg(test)]modtests{usesu......