继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

番茄闹钟四(todoList 模块搭建及封装)

慕仰4546411
关注TA
已关注
手记 21
粉丝 2
获赞 13

一. 调试接口

二.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;
  }
}
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP