首页 > 其他分享 >[React Typescript] Useful React Prop Type Examples

[React Typescript] Useful React Prop Type Examples

时间:2023-05-22 13:33:28浏览次数:47  
标签:Typescript Useful props Prop React impersonate Props forwarding

Relevant for components that accept other React components as props.

export declare interface AppProps {
  children?: React.ReactNode; // best, accepts everything React can render
  childrenElement: JSX.Element; // A single React element
  style?: React.CSSProperties; // to pass through style props
  onChange?: React.FormEventHandler<HTMLInputElement>; // form events! the generic parameter is the type of event.target
  //  more info: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#wrappingmirroring
  props: Props & React.ComponentPropsWithoutRef<"button">; // to impersonate all the props of a button element and explicitly not forwarding its ref
  props2: Props & React.ComponentPropsWithRef<MyButtonWithForwardRef>; // to impersonate all the props of MyButtonForwardedRef and explicitly forwarding its ref
}

 

标签:Typescript,Useful,props,Prop,React,impersonate,Props,forwarding
From: https://www.cnblogs.com/Answer1215/p/17420370.html

相关文章

  • 【Swift开发】混合开发-React Native集成到原生iOS项目
    一、场景描述针对目前项目需求,部分功能需要动态热部署,因此考虑使用ReactNative。下面有个Demo介绍原生iOS项目是如何与ReactNative集成的。先贴下ReactNative中文网是官方教程:ReactNative嵌入到现有原生应用。对老项目来说,官方推荐使用第三方包管理器CoCoaPods来自动集成,但是考......
  • 【React工作记录五十八】函数方式渲染页面
     前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语项目中添加按钮的两种方式编辑核心实现代码......
  • 【React工作记录五十九】根据key值过滤形成新得数组
     目录前言导语 核心实现代码运行结果前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语根据key......
  • react-create-app 创建的项目添加保存自动格式化
    前言首先,react-create-app创建的项目是自带安装eslint的,所以我们要安装prettier及相关插件参考=>https://juejin.cn/post/6844903901544742925安装的包这些都是开发时依赖,注意安装位置eslint-config-react-app打开modules文件,可以看到是已经预安装的,无需重复......
  • React 入门实例教程
    现在最热门的前端框架,毫无疑问是 React 。上周,基于React的 ReactNative 发布,结果一天之内,就获得了5000颗星,受瞩目程度可见一斑。React起源于Facebook的内部项目,因为该公司对市场上所有 JavaScriptMVC框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出......
  • [React] useEffect
    purefunction:单纯返回jsx元素的组件在使用react函数组件时,理论上函数组件只会进行不改变内部状态值的计算,以及返回html代码。一个pure函数就是如此,例如一个函数组件接受一个id作为传入属性,注意这里传入的id并没有发生变化,我们只是简单进行了输出和数学计算://thisisapurefu......
  • AngularJS2 教程 -- TypeScript环境配置
    AngularJS2TypeScript环境配置这开始前,你需要确保你已经安装了npm,如果你还没安装npm或者不了解npm可以查看我们的教程:NPM使用介绍。由于npm官网镜像国内访问太慢,这里我使用了淘宝的npm镜像,安装方法如下:$npminstall-gcnpm--registry=https://registry.npm.taobao.org......
  • 苹果爸爸发飙,封杀 React Native?
    今天早上一上班,就收到了苹果发来的一封警告邮件,一看内容,就知道这是个大事啊,还赶紧发了个微博,然后,今天一整天,iOS界都被这个消息炸裂了!这封警告邮件大概意思就是说,苹果将不再允许使用动态下发代码的机制,如果App内部使用了动态下发代码的框架,将有被拒的风险。所谓的动态下发代码,就......
  • React闭包陷阱
    React闭包陷阱ReactHooks是React16.8引入的一个新特性,其出现让React的函数组件也能够拥有状态和生命周期方法,其优势在于可以让我们在不编写类组件的情况下,更细粒度地复用状态逻辑和副作用代码,但是同时也带来了额外的心智负担,闭包陷阱就是其中之一。闭包从React闭包陷阱的名字......
  • react面试题汇总1
    请介绍一下React的生命周期函数及其调用顺序。答:React的生命周期函数分为三个阶段:挂载、更新和卸载。以下是各个生命周期函数的名称及调用顺序:挂载阶段constructor():组件构造函数,在最开始时调用。staticgetDerivedStateFromProps():从props中派生出state,返回新的state值,会在render......