umi+antd语法知识点学习

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

 

 

3，Pro-Layout如何添加

（1）配置路由菜单

https://juejin.cn/post/7074565988284366879  

（2）页面布局

（3）

 

2，组件库@ant-design/pro-components学习

import { PageContainer } from '@ant-design/pro-components';

https://www.npmjs.com/package/@ant-design/pro-components

官方站点：https://procomponents.ant.design/

 

antd pro具体组件链接：https://procomponents.ant.design/components/page-container#pagecontainer-demo-fixheader

（工作量不是一般的大）

antd 具体组件也都要会：https://ant.design/components/card-cn

 

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 父子组件传递参数。