React遍历数组
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx小練習(xí)</title>
</head>
<body><!-- 準(zhǔn)備好一個(gè)“容器” --><div id="test"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉(zhuǎn)為js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" >/* 一定注意區(qū)分：【js語句(代碼)】與【js表達(dá)式】1.表達(dá)式：一個(gè)表達(dá)式會(huì)產(chǎn)生一個(gè)值，可以放在任何一個(gè)需要值的地方下面這些都是表達(dá)式：(1). a(2). a+b(3). demo(1)(4). arr.map() (5). function test () {}2.語句(代碼)：下面這些都是語句(代碼)：(1).if(){}(2).for(){}(3).switch(){case:xxxx}*///模擬一些數(shù)據(jù)const data = ['Angular','React','Vue']//1.創(chuàng)建虛擬DOMconst VDOM = (<div><h1>前端js框架列表</h1><ul>{data.map((item,index)=>{return <li key={index}>{item}</li>})}</ul></div>)//2.渲染虛擬DOM到頁面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>```
總結(jié)
- 上一篇： 家用台式电脑什么配置够用？
- 下一篇： React中的方法调用