React--2: jsx

用户4793865

发布于 2023-01-12 14:10:59

5250

发布于 2023-01-12 14:10:59

文章被收录于专栏：前端小菜鸡yym前端小菜鸡yym

这是我参与8月更文挑战的第11天，活动详情查看:8月更文挑战

1. jsx了解

全称：JavaScript XML
react定义的是一种类似于 XML 的 JS 扩展语法 JS + XML
本质是 React.createElemet() 的一种语法糖

🚀 了解一下 XML 早期用于存储和传输数据（结构比数据多）

<Student>
        <name>Tom</name>
        <age>18</age>
</Student>

json

{
    "name":"Tom"
    "age":19
}

parse：用于 json 转为 js 的对象 stringfy：用于将 js 对象转为 json

2. jsx语法规则

定义虚拟DOM时，不要写引号
标签中使用变量，用 { }

const myId ="aBCd"
const VDOM = <h1>Hello React{myId}</h1>
ReactDOM.render(VDOM,document.getElementById('root'))
const TDOM = document.getElementById('root');

使用外部样式不要用class，用className

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
const myId ="aBCd"
const VDOM = <h1 class="title"><span>Hello React{myId}</span></h1>
ReactDOM.render(VDOM,document.getElementById('root'))
const TDOM = document.getElementById('root');

index.css

.title{
  text-align: center;
  background-color: aqua;
}

虽然效果出来了，但是我们发现它抱错。报错什么意思呢？因为不能使用class，那用什么？用className

使用内联样式要用style={{ }} 的形式去写。并且样式使用驼峰规则。

我们之前的写法

const VDOM = <h1 style="background:red">Hello React{myId}</h1>

那么，这么写是会抱错的。如下写法才是正确的。使用双花括号，最外层的花括号表示要在里面写 js 表达式了。里面的花括号表示写的是一个对象。

const VDOM = <h1 style={{background:"red",color:'white'}}>Hello React{myId}</h1>

如果想要写多个字母的属性，我们需要使用驼峰规则，如：fontSize。

const VDOM = 
<h1 style={{background:"red",color:'white',fontSize:'20px'}}>
    Hello React{myId}
</h1>

不能有多个根标签，必须只有一个根标签。

所以需要在最外层包一层标签

const VDOM = (
    <div>
        <h1 style={{ background: "red", color: 'white', fontSize: '20px' }}>
            Hello React{myId}
        </h1>
        <h1>sdsds</h1>
    </div>

)

标签必须闭合
标签首字母
- 若小写字母开头，则将该标签转为 html 的同名元素，若html无该标签对应的同名元素，则抱错。
- 若大写字母开头，react就去渲染对应组件，如组件没定义，则报错。

3. jsx小练习

动态遍历列表渲染

// ES6 中模块化语法
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
const data = ["React","Vue","Angular"]
const VDOM = (
    <div>
        <h1>
            前端框架列表
        </h1>
        <ul>
            {data.map((item,index)=>{
                return( <li>{item}</li>)
               
            })}
        </ul>
    </div>

)
ReactDOM.render(VDOM, document.getElementById('root'))
const TDOM = document.getElementById('root');

上面的报错：说明没有唯一的key，因为是遍历出来的，我们需要加上唯一的key。