JSX语法入门学习

- 日理万妓 2022-11-19 04:10 258阅读 0赞

## JSX语法入门学习 ##

#### 1、特点 ####

> 1.  JSX只是高级语法糖, 最终执行时还是会被转成原生js, 通过babel等方式;
> 2.  更加语义化, 更加直观, 代码可读性更高;
> 3.  性能相对原生方式更加好一些!

#### 2、示例 ####

a. 多重标签嵌套

ReactDOM.render(
        <div>
            <h2>多层标签嵌套</h2>
            <img src="img/logo.jpg"/>
            <p>测试</p>
        </div>
    ,document.getElementById('app'))

b. js中的变量, 表达式要写在\{\}内

ReactDOM.render(
        <div>
            <p>600+1414/2+46/5 = { 600+1414/2+46/5}</p>
        </div>,
    document.getElementById('app'));

c. 内联样式通过对象方式引入

const myStyle = { 
        background:'purple',
        color:'yellow',
        fontSize:30
    }
    
    ReactDOM.render(
        <div>
            <h2>给你点颜色看看</h2>
            <div style={ myStyle}>颜色来了</div>
        </div>,
    document.getElementById('app'))

d. 数组遍历

//声明数组
    const dataArr = [
        { name:'孙悟空', power:'2000'},
        { name:'凯', power:'2500'},
        { name:'亚瑟', power:'1800'},
        { name:'牛魔', power:'1000'}
    ];
    
    //2、创建虚拟DOM
    const vDOM = (<ul>
        { 
            dataArr.map((data, index) =>
                <li key={ index}>{ index + 1}
                 ------- { data.name}
                 -------- 战力：{ data.power}</li>
            )
        }
    </ul>);
    
    
    //3、将虚拟DOM渲染到页面元素上
    ReactDOM.render( vDOM,document.getElementById('app'));

#### 3、注意问题 ####

> 1.  JSX中添加属性时，使用 className 代替 class , 像label中的for属性，使用htmlFor代替；
> 2.  JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；
> 3.  JSX语法中，标签必须成对出现，如果是单标签，则必须自闭合；
> 4.  在 JSX 中可以直接使用 JS代码，直接在 JSX 中通过 \{\} 中间写 JS代码即可；
> 5.  在 JSX 中只能使用表达式，不能出现语句；
> 6.  在 JSX 中注释语法：\{/\* 中间是注释的内容 \*/\}