React简单解释如何封装组件的demo
2017-06-23 11:50
706 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Reactjs in 40 </title> <style media="screen"> .like-btn { font-size: 50px; } </style> </head> <body> <div class='wrapper'></div> </body> <script type="text/javascript"> /* Component */ class Component { constructor (props = {}) { this.props = props } setState (state) { const oldEl = this.el this.state = state this.el = this.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 } } const createDOMFromString = (domString) => { const div = document.createElement('div') div.innerHTML = domString return div } const mount = (component, wrapper) => { wrapper.appendChild(component.renderDOM()) component.onStateChange = (oldEl, newEl) => { wrapper.insertBefore(newEl, oldEl) wrapper.removeChild(oldEl) } } /* ========================================= */ 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>��</span> </button> ` } } class RedBlueButton extends Component { constructor (props) { super(props) this.state = { color: 'red' } } onClick () { this.setState({ color: 'blue' }) } render () { return ` <div style='color: ${this.state.color};'>${this.state.color}</div> ` } } const wrapper = document.querySelector('.wrapper') mount(new LikeButton({ bgColor: 'red' }), wrapper) mount(new LikeButton(), wrapper) mount(new RedBlueButton(), wrapper) </script> </html>
文章链接:http://huziketang.com/books/react/lesson2
相关文章推荐
- 从零开始 React Native(6) 计时器案例(模块化_组件封装)有图有demo
- React组件嵌套--简单Demo
- 对commons fileupload组件的简单封装
- 对commons fileupload组件的简单封装
- 封装一个简单的solrserver组件
- 如何用简单易懂的例子解释隐马尔可夫模型?
- android 之如何优化 ListView 简单解释
- 年前简单封装了两个图形报表控件,做了个demo放上来。
- 用ReactJS写的简单组件Pagebar(待完善。。。)
- 计算机是如何工作的(最简单透彻的解释)
- 计算机是如何工作的(最简单透彻的解释)
- 简单解释Windows如何使用FS段寄存器
- 对commons fileupload组件的简单封装
- 对commons fileupload组件的简单封装
- 对commons fileupload组件的简单封装
- 自己在之前做两个项目中遇到多线程并发访问如何解决的一个简单demo程序
- 对commons fileupload组件的简单封装
- 一个简单的WEB流程图组件[demo]
- 通用权限管理系统组件 (GPM - General Permissions Manager) 中最简单的例子程序,如何时间通讯录管理
- [MyBean说明书]-如何进行最简单的DEMO