React笔记（二）—— JSX表达式

一、什么是JSX?

JSX = JavaScript XML，这是React官方发明的一种JS语法（糖）

注意：JSX是声明式（声明式更高级一些），JS是命令式

 二、类组件

 三、函数级组件

 1、第一种显示数据的方法

 2、第二种显示数据的方法

 

注意：大括号里面只能写表达式，不能写流程控制语句

 

张果老师教学视频：React_180_React复习_JSX表达式_哔哩哔哩_bilibili

 

 3、自定义函数

 1 import React from 'react'
 2 
 3 export default function C21 () {
 4 
 5  //自定义函数
 6  function add (a1,a2) {
 7     return `${a1} + ${a2} = ${a1 + a2}`;
 8     }
 9     
10    // 创建一个变量jsx，它是一个h2标签，内容为add函数的返回值
11     let jsx = <h2>{ add(100,200)}</h2>
12 
13     return (
14       //必须加上根标签
15       <div>
16           加法算法：{jsx} 
17     </div>
18   )
19 }
View Code

 

效果图：

 张果老师教学视频：React_180_React复习_JSX表达式2_哔哩哔哩_bilibili

 

4、显示隐藏

 1 import React, { useState } from 'react';
 2 
 3 export default function C22() {
 4   // 使用useState钩子函数创建一个名为isShow的状态变量，并初始化为true
 5   const [isShow, setIsShow] = useState(true);
 6 
 7   return (
 8     <div>
 9       {/* 点击按钮切换isShow的值，并显示相应的文本 */}
10       <button onClick={() => setIsShow(!isShow)}>切换显示隐藏状态：{isShow + ''}</button>
11       <div>
12         {/* 根据isShow的值显示不同的内容 */}
13         {isShow && <h2>可见</h2>}
14         {!isShow && <h2>不可见</h2>}
15       </div>
16     </div>
17   )
18 }
View Code

 

效果图：

 张果老师教学视频：React_180_React复习_JSX中使用and符与三目运算符替代if_哔哩哔哩_bilibili

 

5、map函数

 1 // 定义一个旧数组
 2 let oldArr = [8, 3, 2, 6, 1, 5];
 3 
 4 // 使用map方法遍历旧数组，对每个元素进行平方操作，并返回新的数组
 5 let newArr = oldArr.map((value, i, arr) => {
 6     // 打印当前索引、元素值以及新旧数组是否相等
 7     console.log(`${i} - ${value} ${arr === oldArr}`);
 8     // 返回元素值的平方
 9     return value*value;
10 });
11 
12 // 打印新数组
13 console.log(newArr);
14 
15 // 打印旧数组
16 console.log(oldArr);
View Code

效果图：

 

张果老师教学视频：React_180_React复习_map函数_哔哩哔哩_bilibili

 

6、list渲染的基础用法

 1 import React from 'react'
 2 
 3 // C23组件
 4 export default function C23() {
 5   // 用户列表
 6   let users = [
 7     { name: 'John', id: 1001 },
 8     { name: 'Joao', id: 1002 },
 9     { name: 'Jean', id: 1003 }
10   ]
11 
12   // 渲染用户列表
13   return (
14 <ul>
15   {/* 遍历users数组，生成列表项 */}
16   {users.map((item, index) => (
17     <li key={item.id}>
18       {/* 在列表项中显示索引、id和姓名 */}
19       {index} - {item.id} - {item.name}
20     </li>
21   ))}
22 </ul>
23   )
24 }
View Code

 

效果：

张果老师教学视频：React_180_React复习_list渲染基础用法_哔哩哔哩_bilibili

 

7、list渲染的高级用法（渲染table）

C24.tsx文件

 1 import React, { useState } from 'react';
 2 import users from './users';
 3 import './c24.css';
 4 
 5 export default function C24() {
 6 // 使用useState钩子函数来存储用户列表
 7 const [userList, setUserList] = useState(users);
 8 
 9 
10   //删除用户
11   function deleteUser(index) {
12     // 复制用户列表
13     const updatedUsers = [...userList];
14     // 删除指定索引的用户
15     updatedUsers.splice(index, 1);
16     // 更新用户列表
17     setUserList(updatedUsers);
18   }
19 
20   return (
21     <>
22       <table className='tab'>
23         <tbody>
24           <tr>
25             <th>序号</th>
26             <th>姓名</th>
27             <th>年龄</th>
28             <th>操作</th>
29           </tr>
30 
31           {/* 遍历userList数组，生成表格行 */}
32           {userList.map((user, index) => (
33             <tr key={index}>
34               <td>{index + 1}</td>
35               <td>{user.name}</td>
36               <td>{user.age}</td>
37               <td>
38                 <button onClick={() => deleteUser(index)}>删除</button>
39               </td>
40             </tr>
41           ))}
42         </tbody>
43       </table>
44     </>
45   );
46 }
View Code

users.ts文件

 1 export default [
 2   {
 3     "name": "User1",
 4     "age": 25,
 5     "hobbies": ["阅读", "游泳", "画画"]
 6   },
 7   {
 8     "name": "User2",
 9     "age": 30,
10     "hobbies": ["编程", "健身", "旅行"]
11   },
12   {
13     "name": "User3",
14     "age": 35,
15     "hobbies": ["烹饪", "摄影", "音乐", "瑜伽"]
16   },
17   {
18     "name": "User4",
19     "age": 28,
20     "hobbies": ["写作", "篮球", "电影"]
21   },
22   {
23     "name": "User5",
24     "age": 32,
25     "hobbies": ["骑行", "园艺", "吉他"]
26   },
27   {
28     "name": "User6",
29     "age": 27,
30     "hobbies": ["舞蹈", "设计", "登山"]
31   },
32   {
33     "name": "User7",
34     "age": 33,
35     "hobbies": ["跑步", "学习外语", "电竞"]
36   },
37   {
38     "name": "User8",
39     "age": 29,
40     "hobbies": ["烹饪", "阅读科幻小说", "钢琴"]
41   },
42   {
43     "name": "User9",
44     "age": 31,
45     "hobbies": ["徒步", "书法", "潜水"]
46   },
47   {
48     "name": "User10",
49     "age": 26,
50     "hobbies": ["唱歌", "手工DIY", "羽毛球"]
51   }
52 ]
View Code

 

c24.css文件
 1 .tab {
 2     /* 设置表格的边框为1像素的实线，颜色为黑色 */
 3     border: 1px solid #000;
 4     /* 设置表格的边框折叠为collapse，即相邻的边框合并为一个 */
 5     border-collapse: collapse;
 6     /* 设置表格的宽度为100% */
 7     width: 100%;
 8 }
 9 
10 .tab th,
11 .tab td {
12     /* 设置单元格的边框为1像素的实线，颜色为黑色 */
13     border: 1px solid #000;
14     /* 设置单元格的内边距为10像素 */
15     padding: 10px;
16     /* 设置单元格的文本对齐方式为居中 */
17     text-align: center;
18     /* 设置单元格的边框折叠为collapse，即相邻的边框合并为一个 */
19     border-collapse: collapse;
20 }
View Code

 

效果图：

 张果老师教学视频：React_180_React复习_渲染table_哔哩哔哩_bilibili

 

posted @ 2024-02-29 16:37  一只菜喵程序媛  阅读(64)  评论(0)    收藏  举报