react 入門-建立元件（3）工廠方法

阿新 • • 發佈：2018-11-14

例項

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Factories</title>
</head>
<body>

<!-- Target Container -->
<div id="react-container"></div>

<!-- React Library & React DOM-->
<script src="https://unpkg.com/ 
[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/react-d[email protected]/umd/react-dom.development.js"></script>

<script>
    const { render } = ReactDOM
    const foodList = ({ list }) =>
        React.createElement('ul', null,
            list.map((item, i) =>
                React.createElement('li' 
, {key: i}, item)
            )
    )
    const listFactory = React.createFactory(foodList)
    const list = [
        "1 apple",
        "1 banana",
        "2 oranges",
        "2 tomatos"
    ]
    render(
        listFactory({list}),
        document.getElementById('react-container')
    )
</script 
>

</body>
</html>

說明

1、建立無狀態函式

const foodList = ({ list }) =>
        React.createElement('ul', null,
            list.map((item, i) =>
                React.createElement('li', {key: i}, item)
            )
)

2、建立工廠方法

const listFactory = React.createFactory(foodList)

3、使用工廠方法,傳入實參

render(
    listFactory({list}),
    document.getElementById('react-container')
)

react 入門-建立元件（3）工廠方法

例項 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Factories</title> </head> <

react 入門-建立元件（2）無狀態功能函式法

前面說的是通過繼承React.Component建立React元件。還可以通過無狀態的功能函式構造React元件。舉例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&

react 入門-建立元件（1）繼承component法

React 元件(Component) 也是一種元素Element,只不過是粒度更大一些的、包含更多子元素。通過React元件，把一些相關的元素組織起來，形成可以複用的、有多個成員的元素的組合。舉例 <!DOCTYPE html> <html> &

跟著實例學習設計模式（3）-工廠方法（創建型）

迪米特 tex 新的類的設計 package set pre sdn sso 工廠方法屬於創建型設計模式。設計意圖：定義一個用於創建對象的接口。讓子類決定實例化哪一個類，工廠方法使一個類的實例化延遲到其子類。靜態工廠使用面向對象的方式，有

設計模式深入學習IOS版（3）工廠方法模式

1 前言上篇部落格我們學習了簡單工廠模式，今天我們深入一點，學習一下工廠方法模式。工廠方法模式是在簡單工廠模式的基礎上延伸出來的，只不過把原來的工廠類給抽象出來了，這樣是的工廠類可擴充套件性增強。從而進一步的進行了抽象。 2 詳述 2.1 定義定義一個用於建立

React從入門到架構（3）--引入元件，試試Ant designer

Okay，完成了專案的基本搭建React從入門到架構（2）–如何配置你的“CSS和JS路徑”以後，我們得到了這樣的一個頁面：有的同學會說，Okay，我知道怎麼寫了，我就在這個Return的內容裡，寫我的整個頁面就可以了～！這確實是一種辦法，但是這樣React的特性就完全被浪費掉

ArcGIS Engine10.0輕鬆入門級教程（2）——建立一個ArcGIS Engine桌面應用程式 ArcGIS Engine10.0輕鬆入門級教程（3）——ArcEngine10.0查詢分析功能 ArcGIS Engine— 學習圖層符號化

ArcGIS Engine10.0輕鬆入門級教程（1）——必備基礎知識 ArcGIS Engine10.0輕鬆入門級教程（2）——建立一個ArcGIS Engine桌面應用程式 ArcGIS Engine10.0輕鬆入門級教程（3）——ArcEngine

React躬行記（3）——元件

　　元件（Component）由若干個React元素組成，包含屬性、狀態和生命週期等部分，滿足獨立、可複用、高內聚和低耦合等設計原則，每個React應用程式都是由一個個的元件搭建而成，即組成React應用程式的最小單元正是元件。一、構建　　目前推崇的構建元件的方式總共有兩種：類和函式，而用React.

Spring入門學習筆記（3）——事件處理類

aware super 不能 href his 應用 odi eap app 目錄 Spring中的事件處理 Spring內建事件監聽Context事件 Example 自定義Spring事件 Spring中的事件處理 ApplicationContext 是Spr

C++快速入門---檔案IO（3）

C++快速入門---檔案IO（3） argc與argv[] 在程式中，main函式有兩個引數，整形變數argc和字元指標陣列argv[] argc：程式的引數數量，包括本身 argv[]的每個指標指向命令列的一個字串，所以argv[0]指向字串"copyFile.e

android四大元件（3）(BroadcastReceiver)

一、aandroid的四大元件BroadcastReceiver廣播接收器（用於接收程式所發出的Broadcast Intent)，其本生就是一個全域性的監聽器，用於監聽系統全域性的廣播訊息。由於BroadcastReceiver是全域性的監聽器，所以它可以非常方便地實現系統中不同元件之間地通訊。

Robot Framework - 入門與操作（3）

活動 == 一個情況下簡要概述動態測試錯誤們的 mod 08- 創建測試庫--發布測試庫 ***** 測試庫文檔為了便於維護，測試庫文檔應該從源代碼中生成。 Robot Framework 有自己的文檔工具 libdoc.py生成 API 文檔。一個關鍵字文

ARKit從入門到精通（3）-ARKit自定義實現

1.1-建立一個簡單的工程 1.上一小節中介紹過，ARSCNView的英文UIView的子類的子類，所以從理論上來說，應用我們框架UIKit的英文可以載入AR場景的 0401.png 2.給介面新增一個按鈕開啟AR之旅，建立一個ARSCNViewController：繼承於UIViewCont

6.元件（3）之父級傳子級

父級資料傳遞給子級: 　　1.通過在子元件的身上加一個v-bind:自定義屬性名=父級的資料　　　　<ppa v-bind:data="arr"> ->簡寫 <ppa :data="arr"> 　　2.子元件通過props去接收　　

Spring基礎快速入門spring cloud（3）業務邏輯服務

Spring Cloud是Spring總多的Project中的一個,它提供了一整套的工具幫助系統架構師們在進行分散式設計的時候可以拿來即用, 在建立和釋出微服務時極為便捷和有效。本系列文章將會使用最簡單的例子和最為容易的方式來學習Spring Cloud。本文種將會建立兩個非常簡單的ser

opencv入門跟蹤演算法（3）之camshift

二.演算法原理 1、camshift利用目標的顏色直方圖模型將影象轉換為顏色概率分佈圖，初始化一個搜尋窗的大小和位置，並根據上一幀得到的結果自適應調整搜尋視窗的位置和大小，從而定位出當前影象中目標的中心位置。camshift的核心步驟仍然是Meanshift，只是在距離相似性

jquery（3）--常用方法

標簽效果 oct script 節點 orange 下標 log range $()下的常用方法： 1、has（）; 2、not（）; 3、filter(); 4、next(); 5、prev(); 6、find(); 7、eq(); 8、index(); 9、attr(

設計模式（二）---工廠方法模式

ack cto sys alt 修改 spa 抽象類 .com desc 1、簡介：工廠方法模式是類的創建模式，又叫虛擬構造子模式或是多態性工廠模式，它的實現方式是創建一個工廠接口，將實際創建對象的的工作轉移到工廠子類中，在系統的擴展中，可以在不修改工廠角色的情況下引進新的

設計模式（二）——工廠方法模式

設計模式（二）—— 工廠方法

源碼下載工廠方法模式 ati \n end 註意 con 流程 pie 工廠方法模式簡介工廠方法模式(Factory Method Pattern)又被稱為工廠模式，也叫虛構造器(Virtual Constructor)模式或多態工廠(Polymorphic Fact

react 入門-建立元件（3）工廠方法

例項

說明

相關推薦