Ant design pro V5 修改并讲解welcome.tsx文件，学习使用antd组件

最新推荐文章于 2025-09-18 18:59:14 发布

原创

最新推荐文章于 2025-09-18 18:59:14 发布 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs

本文详细讲解了如何改造Ant Design Pro V5的Welcome.tsx文件，通过改造Alert组件并添加自定义组件，深入理解React组件工作原理和Ant Design组件的使用。在改造过程中，学习了React.FC的用法、组件的属性配置，并通过实例演示了如何根据Ant Design官方API文档进行组件定制。最后，介绍了组件排版问题的解决，强调了Space组件在布局调整中的作用。

在上一章我们了解了一些组件的使用，初步对于此框架有了一个大概的了解，今天我们就welcome.tsx文件进行详细探讨，希望做到举一反三。

改造Welcome.tsx

我们打开src/pages/Welcome.tsx文件，首先看最上方
在这里插入图片描述
是不是很熟悉？没错，就是我们后端编程时需要的引用第三方库文件，那么在react中同样需要。各位可以注意一下写法。
再来看第二段
详解：
const定义的变量是不可以再被赋值的，但是它定义的变量的内部属性是可以被修改的。相似于在Java中我们定义一个方法时，定义的方法名。
React.FC：意为React.FunctionComponent，即函数组件，输入不同的变量，会根据内部不同的函数逻辑输出不同的结果。
{children}：即可以理解为形参
再往下看：在这里插入图片描述
React.Node：即React节点，可以理解为整个网页由无数个节点组成，节点不可被外部传值，赋值，只能在内部进行修改。
export default（）：React.Node=>{}：为ES6的箭头函数写法，不熟悉的可