读react.js小书 抽象公共组件类
首先在component的类中定义了一个按钮抽象出来的一个类
class Component {setState (state) {const oldEl = this.elthis.state = statethis._renderDOM()if (this.onStateChange) this.onStateChange(oldEl, this.el)}_renderDOM () {this.el = createDOMFromString(this.render())if (this.onClick) {this.el.addEventListener('click', this.onClick.bind(this), false)}return this.el}}这个mount函数中的wrapper就是我们在在html中写的div的类
在wrapper中添加删除操作后的dom节点
const mount = (component, wrapper) => {wrapper.appendChild(component._renderDOM())component.onStateChange = (oldEl, newEl) => {wrapper.insertBefore(newEl, oldEl)wrapper.removeChild(oldEl)}}可以在构造函数中进行参数的传递在constructor中进行props的传参，在传参后我们可以通过一些暴露的可修改的变量，来进行组件功能扩展
class LikeButton extends Component {constructor (props) {super(props)this.state = { isLiked: false }}onClick () {this.setState({isLiked: !this.state.isLiked})}render () {return `<button class='like-btn' style="background-color: ${this.props.bgColor}"><span class='like-text'>${this.state.isLiked ? '取消' : '点赞'}</span><span>
读react.js小书 抽象公共组件类相关推荐
- React.js 小书 Lesson1-2 - 前端组件化（一）：从一个简单的例子讲起
React.js 小书 Lesson1-2 - 前端组件化(一):从一个简单的例子讲起 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson2 ...
- React.js 小书 Lesson24 - PropTypes 和组件参数验证
作者:胡子大哈 原文链接: http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋 ...
- React.js 小书 Lesson18 - 挂载阶段的组件生命周期（一）
React.js 小书 Lesson18 - 挂载阶段的组件生命周期(一) 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson18 转载请注 ...
- React.js小书总结
(迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...
- React.js 小书 Lesson12 - state vs props
React.js 小书 Lesson12 - state vs props 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson12 转载请注 ...
- React.js 小书 Lesson14 - 实战分析：评论功能（一）
React.js 小书 Lesson14 - 实战分析:评论功能(一) 本文作者:胡子大哈 本文原文:http://react.huziketang.com/blog/lesson14 转载请注明出处 ...
- React.js 小书 Lesson27 - 实战分析：评论功能（六）
React.js 小书 Lesson27 - 实战分析:评论功能(六) 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson27 转载请注明出 ...
- React.js 小书 Lesson5 - React.js 基本环境安装
React.js 小书 Lesson5 - React.js 基本环境安装 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson5 转载请注明 ...
- React.js 小书 Lesson15 - 实战分析：评论功能（二）
作者:胡子大哈 原文链接: http://huziketang.com/books/react/lesson15 转载请注明出处,保留原文链接和作者信息. 上一节我们构建了基本的代码框架,现在开始完善 ...
- 前端组件化-抽象公共组件类
优化上次的组件化小demo 上次的组件化demo只是为了简单的实现前端组件化的思想,这次我们稍微优化一下抽离公共类 下面代码 html <div id="wrapper"&g ...
最新文章
- 在线等：“实习拿到两个不太好的offer，去腾讯还是去阿里？”
- 一本算法刷题必读配套书（附链接）
- Linus Torvalds：Linux背后的智者
- 无人车时代：用深度学习辅助行人检测
- 【PAT笔记】C++标准模板库STL（二）——set的用法和示例
- abv asp是静态网页吗_2019年seo动态网页优化“指南针”
- 如何从Angular的ActivatedRoute数据结构中获得运行时路由信息
- 可访问性不一致 可访问性低_什么是网站可访问性？
- Data-Hack SQL注入检测
- 公司绝不会告诉你的20大秘密
- 书单|阅读让人越来越低
- 20151024-1025-威海-第5届全国高校软件工程专业教育年会参会总结
- 如何删除git本地分支
- 函数式编程的兴衰（Composing Software 1）
- 实战 Flutter 象棋从零到上架
- windows98远程桌面连接
- 常见搜索引擎蜘蛛大全
- 珍珠项链(洛谷-P2768)(Dp矩阵加速)
- 服务器卡logo显示2f,战争机器4卡LOGO界面解决办法
- Mac上安装R语言运行环境及RStudio [超详细!~]
热门文章