番茄闹钟四(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;
  }
}

最后,个人微信,欢迎交流！

本文由博客一文多发平台 OpenWrite 发布！

来源：oschina

链接：https://my.oschina.net/u/4448260/blog/3167054