TypeScript-Todos案例

TS + React 实现 todos 案例

功能演示

1. 展示任务列表
2. 添加任务

父组件：App
子组件：TodoAdd 、TodoList

展示任务列表

思路

使用状态提升（为父组件提供状态，通过 props 传递给子组件）来实现 父 → 子 通讯。

步骤

1. 为父组件 App，提供状态（任务列表数据）和类型
2. 为子组件 TodoList 指定能够接收到的 props 类型
3. 将任务列表数据传递给 TodoList 组件

优化

使用类型声明文件，实现类型共享。

1. 创建 todos.d.ts 文件
2. 将公共的类型移动到 todos.d.ts 文件中，并导出
3. 在用到该类型的组件（App、TodoList）中导入这些类型

添加任务

思路

子组件获取到文本框的值，通过 子 → 父 通讯 将文本框的值传递给父组件。然后，在父组件中将任务添加到状态数据中。

步骤

1. 为子组件添加状态和属性及其类型：
   • 状态：文本框的值
   • 属性：回调函数，接收一个 string 类型的参数
2. 通过受控组件方式获取到文本框的值
3. 在子组件文本框按下回车键时将数据传递给父组件
4. 父组件接收子组件传递过来的任务名称（文本框的值）
5. 将任务添加到父组件的状态数据中