React學習 條件渲染 列表渲染 表單渲染

2021-10-24 20:40:32 字數 3373 閱讀 7186

**如下

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

documenttitle

>

head

>

>

>

div>

body

>

src=

""crossorigin

>

script

>

src=

""crossorigin

>

script

>

src=

"">

script

>

>

>

div>

body

>

type

="text/babel"

>

class

demo2

extends

react.component

render()

else}}

class

demo

extends

react.component}fn

(type))}

render()

onclick=

>tab1<

/button>

onclick=

>tab2<

/button>

/>

<

/div>)}

} reactdom.

render

(>

,document.

getelementbyid()

)script

>

html

>

>

.active

style

>

列表渲染
type

="text/babel"

>

class

demo

extends

react.component

}render()

>**種類有:

<

/li>)}

)return

(<

/ul>)}

} reactdom.

render

(>

,document.

getelementbyid()

)script

>

type

="text/babel"

>

class

demo

extends

react.component

}render()

>v**種類有:

<

/li>

)return

(<

/ul>)}

} reactdom.

render

(>

,document.

getelementbyid()

)script

>

總結:根據資料,通過map返回出新陣列,陣列裡面的標籤必須新增上key屬性,實在沒有不重複的就用下標

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

documenttitle

>

head

>

>

>

div>

body

>

src=

""crossorigin

>

script

>

src=

""crossorigin

>

script

>

src=

"">

script

>

type

='text/babel'

>

class

demo

extends

react.component

}fnchange

(event))}

render()

onchange=

/>

<

/li>

"password" name=

"pass" value=

onchange=

/>

<

/li>

"msg" value=

onchange=

>

<

/textarea>

<

/li>

男:"radio" name=

"***" value=

"boy" onchange=

checked/

>

女:"radio" name=

"***" value=

"girl"

/>

<

/li>

"sel" onchange=

value=

>

"html"

>html<

/option>

"css"

>css<

/option>

"js"

>js<

/option>

<

/select>

<

/li>

提交<

/button>

<

/li>

<

/ul>

<

/form>

<

/div>)}

} reactdom.

render

(>

,document.

getelementbyid()

)script

>

html

>

總結:

小程式學習 條件渲染和列表渲染

文件 在框架中,使用 wx if 來判斷是否需要渲染該 塊 true也可以用 wx elif 和 wx else 來新增乙個 else 塊 5 1 2 2 3因為 wx if 是乙個控制屬性,需要將它新增到乙個標籤上。如果要一次性判斷多個元件標籤,可以使用乙個 block標籤將多個元件包裝起來,並在...

vue學習 條件渲染

v if指令用於條件性地渲染一塊內容。這塊內容只會在指令的表示式返回 truthy 值的時候被渲染。也可以用v else新增乙個 else 塊 因為v if是乙個指令,所以必須將它新增到乙個元素上。但是如果想切換多個元素呢?此時可以把乙個元素當做不可見的包裹元素,並在上面使用v if。最終的渲染結果...

react條件列表渲染

條件渲染 1.條件判斷 constructor props render else return 封裝到函式中 constructor props render gettitlejsx else return titlejsx 2.三元運算子class extends react.component...