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  世界上最棒的鹅  阅读(725)  评论(0编辑  收藏  举报