【React】JSX基础

目录

一、识别js表达式

概念:JSX是JavaScript和XML(HTML)的缩写,表示在JS代码中编写HTML模版结构,它是React中编写UI模版的方式

使用场景:


一、识别js表达式

概念:JSX是JavaScript和XML(HTML)的缩写,表示在JS代码中编写HTML模版结构,它是React中编写UI模版的方式

橙色框内就是jsx

优势:

1.HTML的声明式模版写法 2.JS的可编程能力

使用场景:

1.使用引号传递字符串

2.使用JavaScript变量

  1. 函数调用和方法调用

4.使用JavaScript对象

function App ( {

return (

<div className="App">

this is App

{/* 使用引号传递字符串 */}

{'this is message'}

{/* 识别js变量 */}

{count}

{/* 函数调用 */}

{getName()}

{/* 方法调用 */}

{new Date().getDate()}

{/* 使用js对象 */}

<div style={{ color: 'red' }}>this is div

</div>

二、实现列表渲染

语法:在JSX中可以使用原生JS中的map方法遍历渲染列表

三、实现基础条件渲染

语法:在React中,可以通过逻辑与运算符&&、三元表达式( ?: )实现基础的条件渲染

四、实现复杂条件渲染

需求:列表中需要根据文章状态适配三种情况,单图,三图,和无图三种模式

解决方案:自定义函数+if判断语句

相关推荐
Baklib梅梅29 分钟前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_35 分钟前
Chrome开发者工具
前端·chrome
YiHanXii42 分钟前
this 输出题
前端·javascript·1024程序员节
楊无好1 小时前
React中ref
前端·react.js
程琬清君1 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪1001 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔661 小时前
flutter实现web端实现效果
前端·flutter
csj501 小时前
前端基础之《React(2)—webpack简介-使用Babel》
前端·react
刘新明19892 小时前
算法还原案例4-OLLVM_MD5
开发语言·前端·javascript·1024程序员节
诚实可靠王大锤3 小时前
react-native实现多列表左右滑动+滚动TabBar悬停
javascript·react native·react.js·1024程序员节