首页 > 其他分享 >[React Typescript] JSX.IntrinsicElements

[React Typescript] JSX.IntrinsicElements

时间:2023-08-23 14:01:01浏览次数:43  
标签:IntrinsicElements HTML React DetailedHTMLProps Typescript HTMLElement JSX

        interface IntrinsicElements {
            // HTML
            a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
            abbr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
            address: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
            area: React.DetailedHTMLProps<React.AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>;
            article: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
            ...
        }

Basicly it define the HTML component you can use in React, and it's attirubutes;

 

So, if you have a component 

<myNewElement foo="123" />;

You can also add into it:

declare global {
  namespace JSX {
    interface IntrinsicElements {
      myNewElement: {foo: string}
    }
  }
}

 

标签:IntrinsicElements,HTML,React,DetailedHTMLProps,Typescript,HTMLElement,JSX
From: https://www.cnblogs.com/Answer1215/p/17651432.html

相关文章

  • typeScript学习-泛型
    typeScript学习泛型为什么要用泛型?泛型定义。泛型在类中的应用?封装一个面向对象的ArrayList类。泛型默认值。泛型约束。泛型在Vue3源码中的应用。exendskeyof+keyof的联合应用。泛型反向赋值。具有以下特点的数据类型叫泛型:特点一:定义时不明确使用时必须明确成某......
  • typeScript学习-类型断言、类型转换
    typeScript学习类型断言、类型转换1、类型断言:语法格式:A数据类型的变量asB数据类型。letb:Bletc:C=basC理解:是绕过TS编译检查,类型断言就是对编译器说:我是这个类型了,无需检查。2、类型断言使用场景exportclassVechile{staticcount:number=3......
  • TypeScript使用技巧
    文章目录使用技巧TypeScript内置的工具类型keyofextends限定泛型interface与type区别TypeScript作为JavaScript的超集,通过提供静态类型系统和对ES6+新特性的支持,使JavaScript开发变得更加高效和可维护。掌握TypeScript的使用技巧,可以帮助我们更好地开发和组织JavaScript项......
  • react class与hooks区别
    在React中,有两种主要的方式来管理组件的状态和生命周期:Class组件和Hooks。Class组件:Class组件是React最早引入的方式,它是基于ES6class的语法来创建的。Class组件包含了生命周期方法,可以用来处理组件的状态、副作用等。以下是一些Class组件的特点和生命周期方法:特点:使......
  • 采用typescript编写,实现ofd前端预览、验章。
    前言 浏览器内核已支持pdf文件的渲染,这极大的方便了pdf文件的阅读和推广。ofd文件作为国产板式标准,急需一套在浏览器中渲染方案。本人研究ofd多年,分别采用qt、c#开发了ofd阅读器。本人非前端开发人员,对js、typescript并不熟悉,所以对开发web版阅读器迟迟没有下手。但是,本人......
  • [React Typescript] React namespace
    export=React;exportasnamespaceReact;declarenamespaceReact{////ReactElements//----------------------------------------------------------------------typeElementType<P=any>={[KinkeyofJSX.I......
  • [React Typescript] Inferring Type Arguments in Curried Hooks
    import{DependencyList,useMemo,useState}from"react";import{Equal,Expect}from"../helpers/type-utils";constuseCustomState=<TValue>(initial:TValue)=>{const[value,set]=useState<TValue>(initial);......
  • [React Typescript] Function overload in React hook
    import{useState}from"react";import{Equal,Expect}from"../helpers/type-utils";typeUseStateReturnValue<T>={value:T;set:React.Dispatch<React.SetStateAction<T>>;};exportfunctionuseStateAsObjec......
  • 前端项目实战壹佰陆拾陆react-admin+material ui-react-admin之Create之disableAuthen
    我是歌谣微信公众号关注前端小歌谣import*asReactfrom'react';import{Button,Typography,Box}from'@mui/material';import{Create,SimpleForm,TextInput,DateInput,required,TopToolbar}from'react-admin';constPostCreateActions=()=&......
  • 前端项目实战壹佰陆拾玖react-admin+material ui-react-admin之Create之redirect
    我是歌谣微信公众号关注前端小歌谣constPostCreate=()=>(<Createredirect="list">...</Create>); 重定向视图......