番茄鬧鐘四(todoList 模塊搭建及封裝)

一. 調試接口

二.webstorm 最大化的增加代碼區域

View-Enter Distraction Free Mode

三. 添加新建菜單

https://blog.csdn.net/asing1elife/article/details/82820628

四. 配置路徑

https://blog.csdn.net/weixin_33804990/article/details/91368501

五. ToDoInput 和 ToDo 組件

// ToDoInput負責樣式
// ToDo負責功能
// 放外面處理是爲了後面引入redux,提交action都是做在外面的

六. 製作 Item

this.state.todos.map(t=><TodoItem key={t.id} {...t} />) // ...t把所有屬性放到item裏面

七. 解決 TS2339 報錯

// 在外面定義接口
interface ITodoItemProps {
  description: string
}
<span>{this.props.description}</span>

八. 將 todos 做成寬度一半

#Todos {
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: calc(50% - 8px);
  box-shadow: 0 2px 0 rgba(225,225,225,.2);
  background-color: #fff;
  >.todoLists {
    margin-top: 16px;
  }
}

最後,個人微信,歡迎交流！