JSX

JSX 是 JavaScript 的一个语法扩展，JSX 使得我们可以以类似于 HTML 的形式去使用 JS。

JSX便是React中声明式编程的体现方式。声明式编程，简单理解就是以结果为导向的编程。

使用JSX将我们所期望的网页结构编写出来，然后React再根据JSX自动生成JS代码。

JSX需要被翻译成JS代码才能被React执行，需要使用babel来进行转换

JSX就是React.createElement()的语法糖, JSX在执行前都会被babel转换为js代码

const element = <h1>Hello, world!</h1> // React.createElement('h1', {}, 'Hello, world!')

基本语法

jsx中使用变量

const name = 'xiao zhang'
const element = <h1>Hello, {name}</h1>

const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(element);

jsx中使用方法

function formatName(user) {
  return user.firstName + ' ' + user.lastName
}

const user = {
  firstName: 'xiao',
  lastName: 'zhang'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(element)

jsx中的样式及类名

class使用className，style必须用{}传递一个对象，且css属性需要使用驼峰命名法

const element = <h1 className="title" style={{ fontSize: 18px }}>Hello, {name}</h1>

jsx中的if、for

没有返回值的语句，像if、for等语句是不能出现在JSX中的！

所以我们可以改变一下思路，换一种写法，例如：

let element;
let isLogin = true
if(isLogin){
    element = <h1>欢迎光临！</h1>
}else{
    element = <h1>请登录！</h1>
}

注意：直接将数组插入到JSX中，JSX会自动对数组展开并显示

let eles = []

for(let i=0; i<5; i++){
    eles.push(<h2>我是第{i}个</h2>)
}

jsx列表渲染

第一种方式：使用for循环进行遍历

const students = ['孙悟空', '猪八戒', '沙和尚']
const items = []

for(let i=0; i<students.length; i++){
    items.push(<li>{stus[i]}</li>)
}

const ele = <ul>{items}</ul>

第二种方式：使用map()方法进行处理

const students = ['孙悟空', '猪八戒', '沙和尚']
const items = students.map(item => <li>{item}</li>)
const ele = <ul>{items}</ul>

总结使用TSX的规范

注意事项：

不要加引号
有且只有一个根标签
html标签小写开头，React组件大写开头
可以使用{}插入JS表达式。（表达式：有返回值的语句。JSX也是表达式）
属性正常写（class使用className，style必须用{}）
标签必须正常闭合
布尔类型、Null 以及 Undefined 将会忽略

React（四）之JSX基本语法及使用

JSX