reactjs jsx语法规则

ゞ浴缸里的玫瑰 2023-10-02 18:06 24阅读 0赞

> jsx语法规则：  
> 1.定义虚拟DOM时，不要写引号。  
> 2.标签中混入JS表达式时要用\{\}。  
> 3.样式的类名指定不要用class，要用className。  
> 4.内联样式，要用style=\{ \{key:value\}\}的形式去写。  
> 5.只有一个根标签  
> 6.标签必须闭合  
> 7.标签首字母  
> (1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。  
> (2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>jsx语法规则</title>
    	<style>
    		.title{
          
    			background-color: orange;
    			width: 200px;
    		}
    	</style>
    </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>
    
    	<script type="text/babel" >
    		const myId = 'aTgUiGu'
    		const myData = 'HeLlo,rEaCt'
    
    		//1.创建虚拟DOM
    		const VDOM = (
    			<div>
    				<h2 className="title" id={
          myId.toLowerCase()}>
    					<span style={
          {
          color:'white',fontSize:'29px'}}>{
          myData.toLowerCase()}</span>
    				</h2>
    				<h2 className="title" id={
          myId.toUpperCase()}>
    					<span style={
          {
          color:'white',fontSize:'29px'}}>{
          myData.toLowerCase()}</span>
    				</h2>
    				<input type="text"/>
    			</div>
    		)
    		//2.渲染虚拟DOM到页面
    		ReactDOM.render(VDOM,document.getElementById('test'))
    
    		/* 
    				jsx语法规则：
    						1.定义虚拟DOM时，不要写引号。
    						2.标签中混入JS表达式时要用{}。
    						3.样式的类名指定不要用class，要用className。
    						4.内联样式，要用style={
          {key:value}}的形式去写。
    						5.只有一个根标签
    						6.标签必须闭合
    						7.标签首字母
    								(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
    								(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
    
    		 */
    	</script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_20_color_FFFFFF_t_70_g_se_x_16]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b366bcb67c294672a7339153931914e6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w,size_20,color_FFFFFF,t_70,g_se,x_16