专业编程基础技术教程

网站首页 > 基础教程 正文

Jsx(javascript xml) Jsx(javascript xml get tag

ccvgpt 2024-10-12 14:20:55 基础教程 6 ℃

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文件。

Jsx(javascript xml) Jsx(javascript xml get tag

组件比模块更高一级，比如实现一个网页的头部的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>

Tags：

猜你喜欢

最近发表
标签列表