2. 程式人生 > >React學習（二）props屬性

React學習（二）props屬性

阿新 • • 發佈：2019-02-03

React

一、props屬性知識點

1.每個元件物件都會有props(properties的簡寫)屬性
2.元件標籤的所有屬性都儲存在props中
3.內部讀取某個屬性值: this.props.propertyName
4.作用: 通過標籤屬性從元件外向元件內傳遞資料(只讀)
5.對props中的屬性值進行型別限制和必要性限制
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired}
6.擴充套件屬性: 將物件的所有屬性通過props傳遞

二、元件的組合

1、 元件標籤中包含子元件標籤
2、拆分元件: 拆分介面, 抽取元件
3、通過props傳遞資料

例題2、 如何用元件組合實現以下效果
例題2

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
        <title>components_composing</title>
</head>
<body>
<div id="example"></div>
<script src="js/react.js"
 
></script>
<script src="js/react-dom.js"></script>
<script src="js/babel.min.js"></script>
<script type="text/babel">
     1. 拆分元件: 拆分介面, 抽取元件
       * 單個標題元件: Welcome
       * 應用元件: App
     2. 分析確定傳遞資料和資料型別
       * Welcome: props.name  string
       * App: props.names    array
    function
 
 Welcome(props) {
    return <h2> Welcome {props.name} </h2>;}//直接傳引數
    class App extends React.component{
    render(){
    return(
    <div>
    { this.props.names.map(name =>{
            return <Welcome name={name}/>
        })}
    </div>)}}
    var names = ["Tom","Jack","rock"];
    ReactDOM.render(<App names={names}/>,document.getElementById("example"))
</script>
</body>
</html>

三、詳解例題2React渲染步驟

1.建立APP例項物件
2.呼叫render（），得到虛擬DOM
<div>
  <Welcome name="TOM"/>
  <Welcome name="Jack"/>
  <Welcome name="rock"/>
</div>
3.找出其中的元件標籤<Welcome>，呼叫對應的Welcome函式，得到對應的虛擬DOM，替換<Welcome>
  <div>
    <h2>Welcome TOM</h2>
    <h2>Welcome Jack</h2>
    <h2>Welcome rock</h2>
  </div>
4.將虛擬DOM轉化成真實DOM，並插入到example對應的div中

相關推薦

React學習（二）props屬性

一、props屬性知識點 1.每個元件物件都會有props(properties的簡寫)屬性 2.元件標籤的所有屬性都儲存在props中 3.內部讀取某個屬性值: this.pro

JS學習（二）物件屬性的獲取和訪問

var array = ["one","two","three"];//陣列 var obj = {//物件     field : "self",     printInfo : function (){        

CSS佈局學習（二） - flex屬性

flex屬性 定義 flex佈局包括最外層的容器和內部的元素，flex屬性是內部元素屬性。flex屬性是flex-grow, flex-shrink, flex-basis三個屬性的簡寫 　　flex-grow 　　設定元素佔flex容器所剩空餘空間的比例 　　flex-shrink 　　設定元素

React學習（二）——元件的運用和資料傳遞

大家好，我是凱文，本篇文章主要圍繞React框架的元件以及元件之間資料的傳遞展開，並通過例項來實現特定的功能。下面先來簡單介紹一下React的元件，由本人學習實踐所得，用於做筆記，僅供參考。      React框架的一大特色就是它通過元件化的方式來構建和渲染前端頁面，瞭解

Maven學習（二）：屬性、座標與依賴

前言： 1、pom檔案的配置，主要內容為屬性、座標與依賴、外掛、倉庫以及其他一些配置。 2、理解這些配置的內容，在一定程度上也就理解了Maven 的使用。 一、屬性 （一）Maven內建屬性： 1、${basedir} 專案根目錄，即包含 pom.xml 的目錄。 2、${v

react-native 學習（二）

androi bsp ger net devel 瀏覽器 sim 百度 解決方法 上一節講到了 react-native的開發環境的配置，，這一節我門具體講講怎麽看樣式，怎麽調試 看樣式的話 有一個 神奇 react-native-developer tools（個人推薦，

React（六）Props屬性

傳遞數據 默認 傳遞 很多 pes validator 屬性 class spa state 和 props 主要的區別在於 props 是不可變的，而 state 可以根據與用戶交互來改變。這就是為什麽有些容器組件需要定義 state 來更新和修改數據。 而子組件只能通過

08 React+Ant Design學習（二）——路由配置

路由配置流程： 具體操作流程       1 開啟計算機命令列工具，輸入命令“npm install react-router --save-dev”安裝路由包，如果出現下圖所示資訊，則說明安裝失敗： 解決方法：       出現此問題的原因主要是

Python+OGR庫學習（二）：讀取點向量檔案，複製特定屬性值點並另存為shp檔案

程式碼思路： 1、匯入相關庫包，切換到當前資料夾 2、註冊驅動，開啟點向量檔案，獲取圖層 3、建立輸出檔案，並獲取圖層（沒有屬性定義） 4、定義輸出圖層欄位屬性：假設已知檔案所有屬性欄位定義（即ID和cover） （1）讀取輸入檔案中某一要素 （2）獲取ID、cover欄位定義 （3

【一起來學React】- Reudx學習（二）

上篇文章我們說到redux一些基礎和在react中如何運用。本文講解在react中如何更加優雅的編寫redux！ 上一篇文章地址：https://blog.csdn.net/Fakin/article/details/85287116 非同步Action 在redu

React學習（五）this.props.children

this.props 物件的屬性與元件的屬性一一對應，但是有一個例外，就是 this.props.children 屬性。它表示元件的所有子節點上面程式碼的 NoteList 元件有兩個 span 子節點，它們都可以通過 this.props.children 讀取。 &l

canvas基礎學習（二）-線條的屬性與星空和圖形變換

以下是星空程式碼實現： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &

爬蟲庫之BeautifulSoup學習（二）

不必要 baidu html left 官方 blank 正則 文本處理 比較 BeautifulSoup官方介紹文檔：https://www.crummy.com/software/BeautifulSoup/bs4/doc/index.zh.html 四大對象種

cocos2dx 3.1從零學習（二）——菜單、場景切換、場景傳值

天空 ptr select 特效 new 要點 綁定 使用 water 回想一下上一篇的內容，我們已經學會了創建一個新的場景scene，加入sprite和label到層中。掌握了定時事件schedule。我們能夠順利的寫出打飛機的主場景框架。 上一篇的內容我練習了七個新

redis學習（二）——String數據類型

字符串類型 創建 復雜度 back nbsp 命令 時間復雜度 value con 一、概述 字符串類型是Redis中最為基礎的數據存儲類型，它在Redis中是二進制安全的，這便意味著該類型可以接受任何格式的數據，如JPEG圖像數據或Json對象描述信息等。在R

Linux 網卡驅動學習（二）（網絡驅動接口小結）

-a key 頻率 網絡 上網 ren 網絡設備 ews 入口 【摘要】前文我們分析了一個虛擬硬件的網絡驅動樣例。從中我們看到了網絡設備的一些接口。事實上網絡設備驅動和塊設備驅動的功能比較相似，都是發送和接收數據包（數據請求）。當然它們實際是有非常多不同

ext2文件系統學習（二）—— 目錄磁盤結構

echo free 文件格式 htm file 目錄結構 bitmap 點號 name 創建鏡像、mount等操作和上一篇一樣，測試目錄結構如下： 一些文件系統信息如下： Block size: 1024 Inodes per group: 1

RabbitMQ學習（二）工作隊列

lose borde 阻塞 lpad mes getc actor 使用 處理 1.工作隊列（Work Queue）又叫任務隊列（Task Queue）指將任務分發個多個消費者。 2.實際操作： 這裏使用一個生產者產生多條數據提供給3個消費者

JAVA學習（二） String使用equals方法和==分別比較的是什麽？（轉）

找到 基礎上 stirng print 大小 obj lis 分配 ret String使用的equals方法和==的區別 equals方法和==的區別 首先大家知道，String既可以作為一個對象來使用，又可以作為一個基本類型來使用。這裏指的作為一個基本類型來使用只是

CSS學習（二）

種類 round align 圖片 單獨 tom -s 中控 vertical 列表 在HTML中，有兩種類型的列表： 無序列表 - 列表項標記用特殊圖形（如小黑點、小方框等） 有序列表 - 列表項的標記有數字或字母 使用CSS，可以列出進一步的樣式，