首页 > 其他分享 >umi+antd语法知识点学习

umi+antd语法知识点学习

时间:2023-07-03 18:01:21浏览次数:58  
标签:知识点 组件 React date FC 泛型 antd message umi

前言:新建一个前端工程,有好多知识点需要学习。查资料的知识点如下

 

 

1,React.FC详细解说

泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。

1.React.FC是一个函数式组件,是在TypeScript使用一个泛型,FC就是FunctionComponent的缩写,事实上React.FC可以写成React.FunctionComponent

const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
    <div>{ message }</div>
);
 
//简写
interface PropsType{
  message : string;
}
const App: React.FC<PropsType> = ({ message }) => ( //{ message }相当于解构赋值,从props中解构
    <div>{ message }</div>
);
 
//声明了一个函数组件App   泛型为{message: string}  
//我能不能这么理解  泛型就是给组件里面使用的参数指定类型 

2. React.FC 包含了 PropsWithChildren 的泛型,不用显式的声明 props.children 的类型。React.FC<> 对于返回类型是显式的,而普通函数版本是隐式的(否则需要附加注释)。

3.React.FC提供了类型检查和自动完成的静态属性:displayName,propTypes和defaultProps(注意:defaultProps与React.FC结合使用会存在一些问题)。

4.我们使用React.FC来写 React 组件的时候,是不能用setState的,取而代之的是useState()、useEffect等 Hook API。

//组件实现实时时间刷新显示
import React, {useState, useEffect} from 'react'; //引入依赖
export App: React.FC<{}> = (props) => { //泛型里面有对象{ 属性名 }(解构)  泛型为空对象就直接写props
    const [date, setDate] = useState(new Date());  //useState()括号里面的值给date
    useEffect(() => {
        const timer = setInterval(() => {
            setDate(new Date()); //setDate() 括号里面的值给date   date的值只能通过setDate()设置
        }, 1000)
    }, []);
    return (
        <div>
            <h3>现在时间是</h3>
            <p>{ date.toLocaleTimeString }</p>
        </div>
    )
}  

 

参考文档:

https://blog.csdn.net/qq_52421092/article/details/127628465 基本用法

https://blog.csdn.net/weixin_41387874/article/details/124001885 父子组件传递参数。

 

标签:知识点,组件,React,date,FC,泛型,antd,message,umi
From: https://www.cnblogs.com/zccst/p/17523556.html

相关文章

  • 【6.0】数据库知识点小结数据库升华
    【6.0】数据库知识点小结数据库升华【一】pymysql模块的进阶知识【1】对数据库数据的增删改查因为在增删改查中,只有查的权限是最简单的,因此查无需过多的权限但是增删改都涉及到数据库数据的变动,需要额外的确认才行(即提交事务)主动提交事务#-*-coding:Utf-8-*-#@Fi......
  • WPF复习知识点记录
    WPF复习知识点记录由于近几年主要在做Web项目,客户端的项目主要是以维护为主,感觉对于基础知识的掌握没有那么牢靠,趁着这个周末重新复习下WPF的相关知识。文章内容主要来自大佬刘铁锰老师的经典著作《深入浅出WPF》。因为是复习,所以知识内容不会一一记录,如有需要了解更多可以看书......
  • 【4.0】数据库知识点小结数据库辉煌
    【4.0】数据库知识点小结数据库辉煌【一】准备数据创建库createdatabaseday03;#QueryOK,1rowaffected(0.00sec)创建表createtableemp( idintnotnulluniqueauto_increment,namevarchar(20)notnull,sexenum("male","female")notnulld......
  • 秋招早知道:这些知识点把握好!
    本文首发自公粽hao「林行学长」,欢迎来撩,免费领取20个求职工具资源包。了解校招、分享校招知识的学长来了!7月开始了,水深火热的暑假生活也快开始了。相信不少同学已经开始熬夜Coding,期望自己能在校招场上一鸣惊人。当然,秋招一路上的小坑可不少,奔赴秋招路上也要补充一下知识点!01提......
  • 空和0造成的Sumifs的错误结果
    问题:某个条件区域为空,直接使用Sumifs的结果错误。解决:H2单元格连接空文本=SUMIFS(C:C,A:A,G2,B:B,H2&"")绝大多数情况下,空单元格被引用后返回的结果是0,但作为Sumif这类函数的条件区域参数,默认为非数值,即空文本,这时就可以将相应的条件转成文本型数字。这一转换不会影响条......
  • Lumion下载-Lumion下载 V10.5分享
    Lumion12简介Lumion12是一个实时的3D可视化工具,用来制作电影和静帧作品,涉及到的领域包括建筑、规划和设计。它也可以传递现场演示。Lumion的强大就在于它能够提供优秀的图像,并将快速和高效工作流程结合在了一起,为你节省时间、精力和金钱。人们能够直接在自己的电脑上创建虚拟现实......
  • antdPro proTable的一系列问题及解决方案
    一 使用editableProTable表头筛选,无法重置解决思路:1.使用ref.current.reloadAndRest(),去重置整个表单,不起作用!!!2.通过查看antdtable文档发现可以通过table的onchange事件去获取filters的值,并在colums中配置filteredValue。示例:https://ant.design/components/table-cn#compo......
  • C++ 编程中的核心知识点
    const作用修饰变量,说明该变量不可以被改变;修饰指针,分为指向常量的指针(pointertoconst)和自身是常量的指针(常量指针,constpointer);修饰引用,指向常量的引用(referencetoconst),用于形参类型,即避免了拷贝,又避免了函数对值的修改;修饰成员函数,说明该成员函数内不能修改成员......
  • 【1.0】数据库知识点小结数据库初识
    【1.0】数据库知识点小结数据库初识【一】存储数据的演变过程【1】文件存储随意地存放到一个文件中、数据格式也是千差万别的完全取决于个人【2】软件开发目录规范(1)概要限制了存储数据的具体位置建立专门的文件夹存储数据(2)软件开发目录规范binmain.pycon......
  • 【2.0】数据库知识点小结数据库进阶
    【2.0】数据库知识点小结数据库进阶【一】存储引擎日常生活中文件格式有很多,并且针对不同的文件格式会有对应不同的存储方式和处理机制针对不同的数据应该有对应的不同的处理机制存储引擎就是不同的处理机制MySQL主要的存储引擎Innodb是MySQL5.5版本之后的默认存储引......