"text/babel"
>
const element =
(="active"
>hello word!
<
/h2>
<
/div>);
reactdom.
render
( element,
document.
queryselector()
)<
/script>
"text/babel"
>
const element =
("active"
> hello word!
<
/h2>
"button" value=
"按鈕"
>
"checkbox" name=
"ipt" id=
"ipt" checked/
>
<
/div>);
reactdom.
render
( element,
document.
queryselector()
)<
/script>
"text/babel"
>
const element =
("active"
>hello word!
<
/h2>
="ipt"
>單選按鈕<
/label>
"checkbox" name=
"ipt" id=
"ipt" defaultchecked /
>
<
/div>);
reactdom.
render
( element,
document.
queryselector()
)<
/script>
react的語法提示也是非常親民，不用過於擔心。
"text/babel"
>
const arr =[1
,2,3
]const arr2 =
['a'
,'b'
,'c'
]const arrli =
["1">
1<
/li>
,"2">
2<
/li>
,"3">
3<
/li>
]const element =
(<
/div>);
reactdom.
render
(element,document.
queryselector()
)<
/script>
"text/babel"
>
const obj =[,
,]const element =
obj.
foreach
((item,index)
=>
>name:
- age:
- ***:
<
/li>);
//如果渲染的是陣列，一定要在每乙個渲染物件裡插入key，作為遍歷參考！不然會報錯})
reactdom.
render
(element,document.
queryselector()
)<
/script>
const todoitems = todos.
map(
(todo)
=>
>
<
/li>
);
function
listitem
(props)
>
<
/li>);
}function
numberlist
(props)
/>);
return
(<
/ul>);
}const numbers =[1
,2,3
,4,5
];reactdom.
render
(/>
, document.
getelementbyid
('root'))
;
"text/babel"
>
function
listitem
(props)
<
/li>;}
function
numberlist
(props)
value=
/>);
console.
log(listitems)
;return
(<
/ul>);
}const numbers =[1
,2,3
,4,5
];reactdom.
render
(/>
, document.
getelementbyid()
);<
/script>
React 列表渲染
第一種 將列表內容拼裝成陣列放置到模板中。第二種 將資料拼裝成陣列的jsx物件。import react from react import reactdom from react dom let arr 小明 小黑 小白 let arrhtml 小明,小黑,小白 class welcome ext...
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 mod...
react條件列表渲染
條件渲染 1.條件判斷 constructor props render else return 封裝到函式中 constructor props render gettitlejsx else return titlejsx 2.三元運算子class extends react.component...