测试2

粗浅的理解是把要展现的东西一股脑写道render{}里面就好，然后在页面指定的div内渲染出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>

    <script type="text/babel">
    var arr = [
        <h1 key="1">Hello world!</h1>,
        <h2 key="2">React is awesome</h2>,
      ];

    ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById('example')
    )

     </script>
</body>
</html>
<!DOCTYPE html>
<html>

<head>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/browser.min.js"></script>
</head>

<body>
    <div id="example"></div>

    <script type="text/babel">
        var names = ['andy','bob','kate'];
    
        ReactDOM.render(
            <div>
                { 
                    names.map(function (name) { 
                        return <div>hello,{name}! </div>
                    }) 
                }
            </div>,

            document.getElementById('example') 
        )
    </script>
</body>

</html>

<!-- 顺便复习一下ES6的 Map 结构
var names = ['andy','bob','kate'];
names.map(function(name){
    return {name};
}) -->

顺带复习一下es6中map：

es6的Map结构用来表示键值对的集合，和js的Object的区别在于：

object只能用字符串做键名，但是Map是可以包括各类值的 比如
let map = new map{}
map.set(NaN,123);
map.get(+0)  // 123
内容来源于网络如有侵权请私信删除
标签： javascript 技术文章 开发
你还没有登录，请先登录或注册！
  • 还没有人评论，欢迎说说您的想法！

相关课程

CSS3样式设计
4835 0元 限免
Web前端入门教程
5950 9.8元