React的JSX语法学习和常见的插值{}内容情况
React JSX语法的博客文章。以下是一篇简短的文章，详细讲解React JSX语法，包括代码示例和注释：
这里写目录标题
- 1.React JSX概念
- 原生js修改div的内容
- jsx方式
- 2. **React JSX使用**
- 2.1 渲染元素--直接写标签就可以了
- 2.2{}可以写的数据---表达式
- 1. **字面常量**：
- 2. **变量**：
- 3. **函数-有返回值**：
- 4. **方法--能获的值**：
- 5. **对象 --属性能获得值**：
- 6. **条件语句--三目运算--需要有返回值(因为表达式就是一个值)**
- 7. **循环语句-数组遍历----有返回值**
1.React JSX概念
因为原生的javascript操作dom很是繁琐,几乎都需要先获取原始dom,在修改数据,在同步给innertext或是节点插入,删除等,如果节点少的话还好,但是如果需要多很多的话,那么节点就太多了不太方便
所以后面出来一个Jquery的JS第三方库,让我们不用为了获取一个标签写那么长的代码.
但是依然不满足现状,后来出现了Angular,react,vue等框架,把原生的js操作DOM更加简化了
JSX就是react的一种便于DOM操作的拓展语法
JSX===javascript+XML
说白了就是 在javascript的代码中插入了HTML标签
原生js修改div的内容
原始内容 jsx方式
const msg="你好"//直接把 你好变为 "加油 不放弃"; //不用dom获取 这些都是框架做好的 能自动编译 const App = () => { return ( {msg}
); } 2. React JSX使用
jsx常常需要结合react的项目使用
在React中，JSX（JavaScript XML）是一种允许在JavaScript代码中编写类似HTML的语法的扩展。JSX使得在React组件中编写UI变得更加直观和易读。让我们来深入了解React JSX语法。
2.1 渲染元素–直接写标签就可以了
首先，让我们创建一个简单的React函数组件，并使用JSX语法来渲染UI元素：
import React from 'react'; const App = () => { return ( Hello, React JSX!
This is a simple JSX example.
); } export default App; 在上面的代码中，我们定义了一个名为 表达式是什么?--------------->表达式就是一个值 在JSX中，我们可以直接在大括号中使用字面常量，比如字符串、数字、布尔值等。例如： Hello, {`World`}! 在这个例子中，我们在大括号中使用了字面常量字符串 我们可以在JSX中使用变量，将其值动态地插入到UI中。例如： Hello, {name}! 这里，我们将变量 在JSX中，我们可以调用函数并将其返回的值嵌入到UI中。例如： Hello, {formatName(user)}! 在这个例子中，我们调用了 如果我们有一个对象，并且该对象具有方法，我们也可以在JSX中调用该方法。例如： Hello, {user.getFullName()}! 在这个例子中，我们调用了 我们还可以在JSX中直接使用对象，并访问对象的属性。例如： Name: {user.name}, Age: {user.age} 在这个例子中，我们直接在JSX中访问了 Hello! Welcome, User! Please log in. 使用三元运算符来实现if’的效果 在上面的代码中，根据变量App的函数组件，使用JSX语法来返回一个包含和等HTML元素的UI结构。2.2{}可以写的数据—表达式
常见的表达式情况1. 字面常量：
const greeting = World。2. 变量：
const name = 'Alice'; const greeting = name的值动态地插入到元素中。3. 函数-有返回值：
function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'John', lastName: 'Doe' }; const greeting = formatName函数，并将其返回的值动态地插入到元素中。4. 方法–能获的值：
const user = { firstName: 'John', lastName: 'Doe', getFullName: function() { return this.firstName + ' ' + this.lastName; } }; const greeting = user对象的getFullName方法，并将其返回的值动态地插入到元素中。5. 对象 --属性能获得值：
const user = { name: 'Alice', age: 25 }; const userInfo = user对象的name和age属性。js const styleObj={color:red} const greeting =
在这个例子中，我们直接在JSX中赋值style样式6. 条件语句–三目运算–需要有返回值(因为表达式就是一个值)
const isLoggedIn = true; return ( 7. 循环语句-数组遍历----有返回值
const List=[ {id:1,value:"北京"}, {id:2,value:"上海"}, {id:3,value:"新疆"}, {id:4,value:"青海"} ] { List.map(ele=>{ return (
List的map返回的值来动态显示多个li。
相关内容