react-jsx和数组

JSX：

1.全称：JavaScriptXML，

2.react定义的一种类似于XML的JS扩展语法：XML+JS

3.作用：用来创建react虚拟DOM（元素）对象

　　var ele=<h1>Hello,world!</h1>

　　注意：他不是一个字符串，也不是HTML/XML，它最终产生的就是一个JS对象

4.标签名/属性任意：HTML标签/属性或者其他标签/属性

5.基本语法规则：

　　遇到 < 开头的代码   以标签语法解析

　　遇到 { 开头的代码   以JS语法解析；标签中的JS必须用{}包裹起来

6.babel.js的作用

　　浏览器不能直接解析JSX代码，需要babel转译为JS代码才能运行；

　　在使用JSX代码之前加type=“text/babel”声明

将数据数组转化为标签数组：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>work2</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
        const names = ['jquery','angular','aepto','react','vue'];
        //将数据数组转换为标签数组，使用map方法
        const ul=(
            <ul>
                {names.map((name,index)=><li key={index}>{name}</li>)}
            </ul>
        );
        reactDom.render(ul,document.getElementById("example1"))
    </script>
</head>
<body>
<h2>这是个例子</h2>
<div id="example1"></div>
</body>
</html>

效果：

posted @ 2019-12-24 15:25  世界上最棒的鹅  阅读(732)  评论(0)    收藏  举报