React 中 使用 ts
时间:2020-05-21
本文章向大家介绍React 中 使用 ts ,主要包括React 中 使用 ts 使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
react中使用ts,难点在于定义数据类型接口和对传入的数据进行校验。
icon.tsx
import React from 'react'; const Icon = ({ name, ...restProps}) => { return ( <svg {...restProps}> <use xlinkHref={`#${name}`}/> </svg> ); }; export default Icon;
index.tsx
import * as React from 'react'; import ReactDom from 'react-dom'; import Icon from './icon/icon'; const fn = (e) => { console.log((e)) }; ReactDom.render( <Icon name='wechat'/>, document.getElementById('root') );
然后对传入的name进行类型确定icon.tsx
import React from 'react'; interface IconProps{ name: string; } const Icon: React.FunctionComponent<IconProps> // React.FunctionComponent为对icon组件的类型测试,后面是传入的值的类型 =({ name, ...restProps})=> { return ( <svg {...restProps}> <use xlinkHref={`#${name}`}/> </svg> ); }; export default Icon;
当然在传值的过程不只传个静态数据,还可能会传个事件,事件的类型判断和静态数据的不一样, 事件的类型判断如下:
interface IconProps extends React.SVGAttributes<SVGElement> { name: string; onClick: React.MouseEventHandler<SVGElement> }
当然,传入的事件也需要进行一下类型判断:
const fn: React.MouseEventHandler<SVGAElement | SVGUseElement> = (e) => {
console.log((e.target as HTMLDivElement))
};
原文出自:https://www.jianshu.com/p/9e08341d2967
原文地址:https://www.cnblogs.com/art-poet/p/12929949.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP文件上传小程序 适合初学者学习!
- php的扩展写法总结
- 实例介绍PHP删除数组中的重复元素
- Python迭代器协议及for循环工作机制详解
- PHP CURL中传递cookie的方法步骤
- PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
- Yii2处理密码加密及验证的方法
- PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
- python如何输出反斜杠
- 在Laravel5中正确设置文件权限的方法
- asp函数split()对应php函数explode()
- php获取目录下所有文件及目录(多种方法)(推荐)
- Python基于Twilio及腾讯云实现国际国内短信接口
- PHP __call()方法实现委托示例
- PHP中rename()函数的妙用讲解