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