React基礎 列表渲染

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
"node_modules/react/umd/react.development.js"
>
<
/script>
"node_modules/react-dom/umd/react-dom.development.js"
>
<
/script>
"node_modules/babel-standalone/babel.min.js"
>
<
/script>
.demostyle
<
/style>
<
/head>
"reactdom"
>
<
/div>
"text/babel"
>
// react列表渲染 map()
let arr =
["吃飯"
,"睡覺"
,"打豆豆"
]let mydom = arr.
map(
(item,index)
=>
// return 
// return 
// 
return
(>
<
/p>)}
) reactdom.
render
(mydom,document.
getelementbyid
('reactdom'))
<
/script>
<
/body>
<
/html>

return

<
/p>

return

>
<
/p>

return

(>
<
/p>
)

"reactdom"

>
<
/div>
"text/babel"
>
// react列表渲染 map()
let arr =
["吃飯"
,"睡覺"
,"打豆豆"
]//必須使用map來遍歷嗎？
// for in 迴圈
function
fun(
)>
<
/p>)}
return newarr;
} reactdom.
render
(fun()
,document.
getelementbyid
('reactdom'))
<
/script>
<
/body>

"reactdom"

>
<
/div>
"text/babel"
>
let arr =
["吃飯"
,"睡覺"
,"打豆豆"];
let index =0;
function
fun(
)} key=
onclick=
}>
<
/p>})
return mydom
}function
render()
render()
<
/script>
<
/body>

React 列表渲染

第一種 將列表內容拼裝成陣列放置到模板中。第二種 將資料拼裝成陣列的jsx物件。import react from react import reactdom from react dom let arr 小明 小黑 小白 let arrhtml 小明,小黑,小白 class welcome ext...

react條件列表渲染

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

React節點屬性，列表渲染

text babel const element active hello word h2 div reactdom.render element,document.queryselector script 即便是因為某些原因使其生效了，但是並不符合規範！text babel const eleme...