龙空技术网

Jsx(javascript xml)

叽叽佩佩 180

前言:

此时你们对“js花括号”大致比较注意,大家都想要知道一些“js花括号”的相关文章。那么小编在网上搜集了一些关于“js花括号””的相关内容,希望兄弟们能喜欢,同学们一起来学习一下吧!

React定义的一种类似于XML的JS扩展语法,用来简化创建虚拟DOM

<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>jsx</title>        <style>            .title{                background-color: orange:                width: 200px;            }        </style><!--定义个样式,也可以写在CSS文件里,引入进来-->    </head>    <body>        <div id="test"></div>        <script type="text/javascript" src="../js/react.development.js"></script>        <script type="text/javascript" src="../js/react-dom.development.js"></script>        <script type="text/javascript" src="../js/babel.min.js"></script>    </body>    <script type="text/babel">        const myid= "lOVE you"        const mydata= "hellO jsx"        const VDOM = ( // <!--h2标签引入样式,用className,span标签引入内联样式的时候,不是用双引号,而是双花括号,-->        <div>            <h2 className="title" id={myid.toLowerCase()}>                 <span style={{color:'red',fontSize:'29px'}}>{mydata.toLowerCase()}</span>            </h2>)// <!--标签中混入JS表达式时要用花括号{},如这里mydata取值 -->            //jsx中只能有一个根标签,比如这里的h2,可以在h2的外面包一层div,就可以写两个h2            <h2 className="title" id={myid.toUpperCase()}>                 <span style={{color:'red',fontSize:'29px'}}>{mydata.toLowerCase()}</span>            </h2>)            //标签首字母若是小写字母,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错            //标签首字母若是大写字母,react就去渲染对应的组件,若组件没有定义,则报错        </div>        ReactDOM.render(VDOM,document.getElementById('test'))    </script></html>
一个jsx的小练习
 <script type="text/babel">        const data=['A','B','C']        const VDOM = (            <div>   //js表达式会产生一个值。js语句(代码),有if,for,switch判断,                <h1>jsx框架</h1>                <ul>                  {                    data.map((item,index)=>{                        return <li key={index}>{item}</li>                    }) //item拿到data里面对应的值,map遍历的第二个值是索引值,                  }                </ul>            </div>        )        ReactDOM.render(VDOM,document.getElementById('test'))    </script>

对应的网页如下:

模块是向外提供特定功能的js程序,一般就是一个js文件。

组件比模块更高一级,比如实现一个网页的头部的html,字体,css,js,图像这些元素组合在一起,就形成了头部这个组件。

组件分为函数式组件和类式组件:

函数式组件:

<script type="text/babel">function MyComponent(){return <h2>show the function component</h2>}ReactDOM.render(<MyComponent/>,document.getElementById('test'))//<MyComponent/>要写上标签,函数定义首字母需要大写</script>

执行了ReactDOM.render(<MyComponent/>。。之后,React解析组件标签,找到MyComponent组件,发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真是DOM,随后呈现在页面中。

类式组件:

    <script type="text/babel">        //创建类组件        class MyComponent extends React.Component{            render(){//render放在类MyComponent的原型对象上,供实例使用。render中的this就是MyComponent的实例对象(MyComponent组件实例对象)                return <h2>show the class component</h2>            }        }              ReactDOM.render(<MyComponent/>,document.getElementById('test'))        //执行了ReactDOM.render(<MyComponent/>之后,React解析组件标签,找到MyComponent组件,然后发现组件是用类定义的,就new出来该类的实例        //并通过该实例调用到原型上的render方法,将render返回的虚拟DOM转为真实DOM,随后呈现在页面上。    </script>

标签: #js花括号