JSX语法学习（二）

最新推荐文章于 2024-02-01 08:00:00 发布

前端路啊

最新推荐文章于 2024-02-01 08:00:00 发布

阅读量886

点赞数

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

本文链接：https://blog.csdn.net/m0_62118859/article/details/124344032

版权

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

摘要由CSDN通过智能技术生成

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中使用表达式，注意不能使用语句。