React遍历数组
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx小練習</title>
</head>
<body><!-- 準備好一個“容器” --><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轉為js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" >/* 一定注意區分:【js語句(代碼)】與【js表達式】1.表達式:一個表達式會產生一個值,可以放在任何一個需要值的地方下面這些都是表達式:(1). a(2). a+b(3). demo(1)(4). arr.map() (5). function test () {}2.語句(代碼):下面這些都是語句(代碼):(1).if(){}(2).for(){}(3).switch(){case:xxxx}*///模擬一些數據const data = ['Angular','React','Vue']//1.創建虛擬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>```
總結
- 上一篇: 家用台式电脑什么配置够用?
- 下一篇: React中的方法调用