React简单解释如何封装组件的demo

来源：互联网发布：龙虾不会自然死亡知乎编辑：程序博客网时间：2024/06/18 01:12
<!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
阅读全文
0 0