第03節 高階JSX語法

2021-08-16 05:33:35 字數 1831 閱讀 4766

使用jsx輸出陣列是有一些小坑需要邁過的,

學習react

title

>

head

>

<

body

>

<

div

id="reactcontainer"

>

div>

<

script

src=

"react.js"

>

script

>

<

script

src=

"react-dom.js"

>

script

>

<

script

src=

"">

script

>

<

script

type=

"text/babel"

>

var

fruits = ["

西瓜","

南瓜","

冬瓜"];var

ij =

react.

createclass(

>

瓜類有:

p>;})

}div

>

}});

reactdom.

render

(<

ij/>

,document.

getelementbyid

('reactcontainer'))

script

>

body

>

html

>上邊的**,我們使用了es6的語法maps來進行進行迴圈,迴圈時需要注意的是,新版本的react需要使用key,如果沒有key雖然會出來效果,但是控制台會包錯。key的作用是生成虛擬dom時,需要使用key來進行標記,dom更新時進行比較。

坑點:上面**render後邊的函式中return後邊的**第乙個標籤必須和return在同一行,換行之後就不會出現任何效果,切記,在實際**操作中我們很容易忽視這個問題,而又找不到問題出在**。

上面**體現了 jsx 的基本語法規則:遇到 html 標籤(以<開頭),就用 html 規則解析;遇到**塊(以

div>

,document.

getelementbyid

('reactcontainer'))

script

>

Python3學習筆記之基礎語法 第1節

為了學習機器學習相關知識,從今天開始學習python3了,首先從語法開始學習。注釋python可以用 進行單行注釋,用 和 進行多行注釋,具體如下 usr bin python3 第乙個注釋 第二個注釋 第三注釋 第四注釋 第五注釋 第六注釋 行與縮排total item one item two ...

第19節 css高階特性之復合選擇器

css高階特性之 復合選擇器title type text css 交集選擇器 h1 ph2.special special 並集選擇器 h2,h3,h4,h5,h6,p 後代選擇器 pspan span 後代選擇器之類別選擇器 special i one li td out inside stro...

C 高階(語法篇) 第11章 設計模式(2)

行為型模式 主要用於管理物件之間的演算法 關係和職責。主要講策略模式 命令模式 觀察者模式 模板模式。策略模式 定義一系列演算法,將這些演算法封裝起來,並且使演算法之間可以轉換。本質是將演算法和客戶端之間隔離,使得客戶端只能通過抽象演算法類來訪問具體演算法。假設手機需要支援3種使用模式,分別是標準模...