React知识点二：JSX语法基础

JSX语法（★★★）

JSX是来描述页面的结构，我们一般在编写业务逻辑渲染页面的时候，需要涉及到传递值，调用函数，判断条件，循环等，这一些在JSX中都能得到支持

嵌入JS表达式

语法：{JavaScritp表达式}

例子：

let content = '插入的内容'
let h1 = <h1>我是通过JSX创建的元素+ {content}</h1>

注意点

• 只要是合法的js表达式都可以进行嵌入

• JSX自身也是js表达式

• 注意：js中的对象是一个例外，一般只会出现在style属性中

• 注意：在{}中不能出现语句

条件渲染

根据不同的条件来渲染不同的JSX结构

方式一：if-else

import React from 'react';
import { createRoot } from 'react-dom/client';
const isloading = false;
const loadData = () => {
    if (isloading) {
        return <div>isloading....</div>
    } else {
        return <div>加载完成！！！</div>
    }
}
const title = (
    <h1>
        {loadData()}
    </h1>
);
const root = createRoot(document.getElementById("root"));
root.render(title);

方式二：三元

const loadData = () => {
        return isloading?(<div>isloading....</div>):(<div>加载完成！！！</div>)
}

方式三：逻辑与运算符（适合true才展示的场景）

// 逻辑与运算符：逻辑中断：只有isLoading=true时，后面的div才展示
const loadData = () => {
  return isLoading && (<div>loading...</div>)
}

可以发现，写JSX的条件渲染与我们之前编写代码的逻辑是差不多的，根据不同的判断逻辑，返回不同的 JSX结构，然后渲染到页面中

列表渲染

• 如果需要渲染一组数据，我们应该使用数组的 map () 方法

• 注意：渲染列表的时候需要添加key属性，key属性的值要保证唯一

• 原则：map()遍历谁，就给谁添加key属性

• 注意：尽量避免使用索引号作为key

const list = [
    { id: 1, name: "lxh" },
    { id: 2, name: "lhy" },
    { id: 3, name: "dfz" }
]
const title = (
    <ul>
        {list.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
);
ReactDOM.render(title, document.getElementById('root'));

必须写key属性,否则：

样式处理

行内样式 -style

在style里面我们通过对象的方式传递数据

<li key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>

​

这种方式比较的麻烦，不方便进行阅读，而且还会导致代码比较的繁琐

类名 -className

创建CSS文件编写样式代码

.red{
    color: red;
    text-align: center;
    background-color: skyblue;
}

在js中进行引入，然后设置类名即可

import './css/index.css'
<ul>
   {list.map(item => <li key={item.id} className="red">{item.name}</li>)}
</ul>

小结

• JSX是React的核心内容

• JSX表示在JS代码中写HTML结构，是React声明式的体现

• 使用JSX配合嵌入的JS表达式、条件渲染、列表渲染、可以描述任意UI结构

• 推荐使用className的方式给JSX添加样式

• React完全利用JS语言自身的能力来编写UI，而不是造轮子增强HTML功能