![510ecccc0565577af94bf1e8b43c1507.png](https://i-blog.csdnimg.cn/blog_migrate/48f3788cff5a05573820d6efddf1c47d.jpeg)
上一章节,我们一起学习了如何创建一个 React TS3 项目。本章节与大家一起聊聊如何使用 TS3 的方式创建组件。声明 React组件的方式共有两种:使用类的方式声明组件(class component)和使用函数的方式声明组件(function component)。今天笔者给大家聊聊使用类的方式声明组件。
今天我们将要创建一个 Confirm 的对话框组件,类似alert对话框,有标题,内容,确认和取消按钮。组件完成后的效果如下图所示:
![f93c71dd76549d6c8cf64a3d6f0ebaf3.png](https://i-blog.csdnimg.cn/blog_migrate/db6d6559c05e55d80dc83f8bc87f1ce2.jpeg)
本篇文章主要包含以下内容:
- 使用 create-react-app 方式创建项目
- 创建第一个类组件
- JSX介绍
- 用 TS3 的方式定义组件属性
- 定义可选属性
- 初始化属性默认值
使用 create-react-app 方式创建项目
本示例我们将使用 create-react-app 创建项目,这篇文章「React TS3 专题」手把手教你创建一个 React TypeScript3项目有介绍过,这里我们快速熟悉下。
1、创建项目
打开控制台,通过以下命令创建我们的 React TS3 项目:
npx create-react-app my-components --typescript
2、安装tslint依赖
接下来,为了保证项目代码质量,我们安装 tslint 的相关依赖:
cd my-componentsnpm install tslint tslint-react tslint-config-prettier --save-dev
3、然后添加 tslint.json 文件,配置相关规则
{ "extends": ["tslint:recommended