JSX语法学习（二）

最新推荐文章于 2025-02-27 23:34:24 发布

前端路啊

最新推荐文章于 2025-02-27 23:34:24 发布

阅读量921

点赞数

分类专栏： # React学习笔记文章标签：前端 react

本文链接：https://blog.youkuaiyun.com/m0_62118859/article/details/124344032

版权

React学习笔记专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了JSX的嵌入表达式、条件渲染和列表渲染。通过实例展示了如何使用if/else、三元运算符、逻辑运算进行条件渲染，以及如何利用map函数在JSX中渲染数组和列表，强调了key属性的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. JSX 嵌入表达式

掌握在JSX中嵌入JS表达式，进行渲染

知识内容：在JSX中使用{ }嵌入JS表达式

展示数据
进行运算
三元运算
使用函数
使用 JSX
使用注释

演示代码：

import React from 'react';
import ReactDom from 'react-dom';

// 数据
const data = {
  name: 'tom',
  age: 18,
};

// 函数
const up = () => {
  return data.name.toUpperCase();
};

// jsx表达式
const list = (
  <ul>
    <li>jack</li>
    <li>tony</li>
  </ul>
);

const element = (
  <div>
    {/* 1. 使用数据  注释推荐快键键(ctrl+/)  */}
    <div>姓名：{data.name}</div>
    <div>年龄：{data.age}</div>
    {/* 2. 使用运算 */}
    <div>明年几岁：{data.age + 1}</div>
    {/* 3. 使用三元 */}
    <div>是否成年：{data.age > 16 ? '是' : '否'}</div>
    {/* 4. 使用函数 */}
    <div>姓名大写：{up()}</div>
    {/* 5. 使用JSX(jsx也是表达式) */}
    <div>朋友：{list}</div>
  </div>
);

ReactDom.render(element, document.getElementById('root'));

总结： 使用{ }可以在JSX中使用表达式，注意不能使用语句。

2. JSX 条件渲染

掌握在JSX中使用分支语句、三元运算、逻辑运算进行条件渲染

知识内容：

使用分支语句 if/else 完成条件渲染
使用 三元运算符 完成条件渲染
使用 逻辑运算符 完成条件渲染

演示代码：

`if/else` 条件渲染

const loading = true;

// 不能再JSX中写语句，但，可以充分利用JS能力
const getContent = () => {
  if (loading) {
    return <div>正在加载...</div>;
  } else {
    return <div>数据加载完毕，这是显示数据</div>;
  }
};

const element = <div>{getContent()}</div>;

`三元运算符` 完成条件渲染

const loading = true;

const element = (
  <div>
    {loading ? <div>正在加载...</div> : <div>数据加载完毕，这是显示数据</div>}
  </div>
);

`逻辑运算` 完成条件渲染

const loading = true;

const element = (
  <div>
    {loading && <div>正在加载...</div>}
    {loading || <div>数据加载完毕，这是显示数据</div>}
  </div>
);

总结： JSX 条件渲染可以使用 if/else 三元运算 逻辑运算 来完成

3. JSX 列表渲染

掌握在JSX中使用Array.map()来进行列表的渲染

知识内容：

可以渲染 JSX 数组
使用 map 渲染列表
直接在 JSX 中使用 map 渲染列表
key 属性使用

演示代码：

可以渲染 `JSX` 数组

// 1. const list = ['tom', 'jack', 'tony'] 把数组转换成如下JSX数组
const list = [<li>tom</li>, <li>jack</li>, <li>tony</li>];
// 2. 把JSX嵌入在UL标签中
const elemet = <ul>{list}</ul>;

使用 `map` 渲染列表

// 1. 数据
const list = ['tom', 'jack', 'tony'];
// 2. 转jsx数组
const list2 = list.map((item) => <li>{item}</li>);
// 3. 使用
const element = <ul>{list2}</ul>;

直接在 `JSX` 中使用 `map` 渲染列表

// 1. 数据
const list = ['tom', 'jack', 'tony'];
// 2. 使用 map调用其实也是js表达式
const element = (
  <ul>
    {list.map((item) => (
      <li>{item}</li>
    ))}
  </ul>
);

`key` 属性使用

// Warning: Each child in a list should have a unique "key" prop.
// 1. 数据
const list = ['tom', 'jack', 'tony'];
// 2. 使用
const element = (
  <ul>
    {list.map((item) => (
      <li key={item}>{item}</li>
    ))}
  </ul>
);

4.JSX 列表渲染练习

巩固JSX中如何渲染列表

练习题目：

使用以下数据，渲染无序列表，显示姓名和是否成年

const list = [
  { id: 100, name: 'tom', age: 15 },
  { id: 101, name: 'jack', age: 18 },
  { id: 102, name: 'tony', age: 20 },
];

落地代码：

import ReactDom from 'react-dom';

// 1. 数据
const list = [
  { id: 100, name: 'tom', age: 15 },
  { id: 101, name: 'jack', age: 18 },
  { id: 102, name: 'tony', age: 20 },
];

// 2. 使用
const element = (
  <ul>
    {list.map((item) => {
      return (
        <li key={item.id}>
          <p>姓名：{item.name}</p>
          <p>是否成年：{item.age > 16 ? '是' : '否'}</p>
        </li>
      );
    })}
  </ul>
);

ReactDom.render(element, document.getElementById('root'));

总结： 熟练掌握使用map进行遍历的写法。