React簡單解釋如何封裝元件的demo

阿新 • • 發佈：2018-12-30

<!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>

React簡單解釋如何封裝元件的demo

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Reactjs in 40 </title>

react 系列原始封裝元件方法

進行開發環境安裝（cnpm 建議使用國內淘寶映象） cnpm install -g create-react-app create-react-app 專案名 cd 專案名 npm start 預設目錄結構； index.js 是入口檔

react native中封裝別的外掛，在父元件中呼叫子元件的ref

話不多說，直接上程式碼：父元件中： import MyToast from '../../myToast'; <MyToast onRef={toast => this.toast = toast} position="center" /> 子元件中： impor

《React-Native系列》元件封裝之Dialog（iOS和Android通用）

最近在專案中封裝了個Dialog元件，iOS和Android平臺上通用。元件Dialog顯示時，從頁面頂部滑動到中間，點選確認或取消後，從頁面底部劃出頁面，需要注意動畫的實現。原始碼如下： [javascript] view plain copy

vue自定義元件中的v-model簡單解釋

在使用iview框架的時候，經常會看到元件用v-model雙向繫結資料，與傳統步驟父元件通過props傳值子元件，子元件傳送$emit來修改值相比，這種方式避免操作子元件的同時再操作父元件，顯得子元件的封裝效果更好。所以，個人認為，我們自己封裝元件也應該有這樣的思維，父元件通過slot或者props傳值，由

封裝一個簡單的日曆元件

隨之做大屏的專案越來越多，echarts用得就越來越多，但是每一個專案都會有不同的挑戰，因為並不是所有的需求都處理過，比如：ui小哥哥設計了一款日曆元件，如下圖：看到這個設計圖，我首先就找了echarts官網中的日曆圖進行修改，但是改了一個下午一點進展都沒有，在網上搜索也並沒有

[操作系統] 線程和進程的簡單解釋

之間一個人 -c process sta ted 運行資源 tin 進程（process）和線程（thread）是操作系統的基本概念，但是它們比較抽象，不容易掌握。最近，我讀到一篇材料，發現有一個很好的類比，可以把它們解釋地清晰易懂。 1. 計算機的核心是CPU

簡單解釋一下正則化

等高線稀疏相交出現貝葉斯最優他還 lac 分享解釋之前，先說明這樣做的目的：如果一個模型我們只打算對現有數據用一次就不再用了，那麽正則化沒必要了，因為我們沒打算在將來他還有用，正則化的目的是為了讓模型的生命更長久，把它扔到現實的數據海洋中活得好，活得久。

python 元類的簡單解釋

.html www ren 有用 copy tle 例子 sky -i 本文轉自博客:http://www.cnblogs.com/piperck/p/5840443.html 作者:piperck python 類和元類(metaclass)的理解和簡單運用 (一) p

Linux為什麽最多能分4個四個主分區的簡單解釋

linux磁盤分區MBR（Master Boot Recorder）主引導記錄,放置硬盤的信息。MBR 可以說是整個硬盤最重要的地方了，因為在 MBR 裏面記錄了兩個重要的東西，分別是：開機管理程序，與磁盤分區表 ( partition table )。所以我們所做的硬盤分區，也就是在修改partition

學習react-簡單小案例(2)

har tel asc div content contain hello head 賦值 <html> <head> <title></title> <meta charset

學習react-簡單小案例(3)

classname type this ont body ava ldr char scrip <html> <head> <title></title> <meta chars

學習react-簡單小案例(4)--點擊事件

fun children float 簡單 reac doc dom eat con <html> <head> <title></title> <meta charset="U

學習react-簡單小案例(5)--綜合案例

edi htm document turn reat prop comment creat ops <html> <head> <title></title> <meta cha

python3裝飾器的簡單解釋

返回如果發揮隱藏使用 font urn pre toolbar #閉包，也叫詞法閉包：如下所示函數A主要是為了函數B提供運行環境的#閉包只是在表現和形式上像函數，其實閉包並不是函數#由函數在嵌套環境中，內層函數裏，對外層函數作用域的變量進行了引用，那麽在外層函數返回

簡述JDBC原理＋　在ＪＡＶＡ中異常是什麽 +　throws 與 throw 區別 + 簡單解釋以下JAVA中的多態

鏈接 con 原理指向引用作用 ger 同名方法 nec ＪＤＢＣ原理：　　加：加載驅動　　鏈：創建連接　　預：創建預編譯　　執：執行SQL語句（查詢需要處理結果級）　　釋：關閉鏈接；　　DBC中定義了一些接口：　　1、驅動管理：　　DriverMan

極大似然估計思想的最簡單解釋

發生小孩 rom 內容需要 https 處的形式相同極大似然估計思想的最簡單解釋 https://blog.csdn.net/class_brick/article/details/79724660?from=timeline 極大似然估計法的理解可以從三

關於spring獲取webApplication.getBean多種途徑和簡單解釋

illegal {} 工廠 ring 後者 ram title 關於 files ApplicationContext ac1 = new FileSystemXmlApplicationContext("com/spark/system

react組件選項卡demo

大寫 ons tle pan babel port struct st3 傳值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

react簡單的tab切換 (styled-components)

state asc 設置 number active true react tab 實現其實，在我們日常的編程當中，經常會碰到tab切換的模塊，那麽，實現他的方法也有很多中，下面是一款簡單，容易理解的react tab切換方法。通過設置state中的curren

React簡單解釋如何封裝元件的demo

相關推薦