JSX
时间:2021-07-31
本文章向大家介绍JSX,主要包括JSX使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
JSX
Jsx 的基本使用
1、createElement()的问题
1、繁琐不简洁
2、不直观,无法一眼看出所描述的结构
3、不优雅,用户体验不爽
-
示例说明:
-
createElement方法示例
React.createElement( 'div', {className: 'shopping-list'}, React.createElement('h1', null, 'Shopping List'), React.createElement( 'ul', null, React.createElement('li', null, 'Apple'), React.createElement('li', null, 'Banana'), ) )
-
Jsx示例
<div className="shopping-list"> <h1>Shopping List</h1> <ul> <li>Apple</li> <li>Banana</li> </ul> </div>
-
2、JSX 简介
JSX是JavaScript XML的简写,表示在JavaScript代码中写XML(HTML)格式的代码。
优势:
声明式语法更加直观、与HTML结构相同,降低了学习成本、提升开发效率
JSX是React的核心内容。
3、使用步骤
-
1、使用JSX语法创建react元素
const title = <h1>hello JSX</h1>
-
2、使用ReactDOM.render()方法渲染react元素到页面中
ReactDOM.render(title, document.getElementById('root'))
4、为什么脚手架中可以使用JSX语法?
1、JSX不是标准的ECMAScript语法,他是ECMAScript的语法扩展
2、需要使用bable编译处理后,才能在浏览器环境中使用
3、create-react-app脚手架中已经默认有该配置,无需手动配置
4、编译JSX语法的包为:@babel/preset-react
5、注意点
1、React元素的属性名使用驼峰命名法
2、特殊属性名:class --> className 、 for --> htmlFor 、 tabindex --> tabIndex
3、没有子节点的React元素可以用 “/>” 结束
4、推荐:使用 “小括号包裹JSX” ,从而避免JS中的自动插入分号陷阱
示例:
const dv = (
<div> hello JSX </div>
)
6、JSX中使用JavaScript表达式
-
嵌入JS表达式
-
数据存储在JS中
-
语法:{JavaScript表达式}
-
注意:语法中是单大括号,不是双大括号!
-
示例:
const name = 'xiaohao'const dv = ( <div>您好,我叫:{name}</div>)
-
7、JSX 的条件渲染
-
场景:loading效果
-
条件渲染:根据条件渲染特定的JSX结构
-
可以使用if/else 、三元运算符、逻辑与运算符来实现
-
示例:
const isLoading = true // is/else // const loadData = () => { // if (isLoading) return (<div>数据加载中......</div>) // return (<div>数据加载完毕</div>) // } // 三元 // const loadData = () => { // return isLoading ? (<div>数据加载中......</div>) : (<div>数据加载完毕</div>) // } // 逻辑运算符 const loadData = () => { return isLoading && (<div>数据加载中......</div>) } const dv = ( <div> {loadData()} </div> )
8、JSX 的列表渲染
-
如果要渲染一组数据,应该使用数组的map()方法
-
注意:渲染列表时应该添加key属性,key属性的值要保证唯一
-
原则:map()遍历谁,就给谁添加key属性
-
注意:尽量避免使用索引号作为key
-
示例:
const songs = [ {id: 0, name: '玫瑰花的葬礼'}, {id: 1, name: '虫儿飞'}, {id: 2, name: '逆战'} ] const list = ( <ul> {songs.map(item => <li key={item.id}>{item.name}</li>)} </ul> ) ReactDOM.render(list, document.getElementById('root'))
9、JSX 的样式处理
-
-
行内样式——style
const songs = [ {id: 0, name: '玫瑰花的葬礼'}, {id: 1, name: '虫儿飞'}, {id: 2, name: '逆战'} ] const list = ( <ul style={{ color: 'red', backgroundColor: 'skyblue' }}> {songs.map(item => <li key={item.id}>{item.name}</li>)} </ul> )
-
-
-
类名——className(推荐)
import './index.css' const songs = [ {id: 0, name: '玫瑰花的葬礼'}, {id: 1, name: '虫儿飞'}, {id: 2, name: '逆战'} ] const list = ( <ul className='list'> {songs.map(item => <li key={item.id}>{item.name}</li>)} </ul> )
-
原文地址:https://www.cnblogs.com/ghh520/p/15085342.html
- ASP.NET MVC项目开发笔记
- .NET Core 实战笔记3 ASP.NET Core
- HTML页面中的lang属性
- JSP Cheat Sheet - JavaWeb基础学习速查表
- 把网站改成APP吧-Xamarin WebView
- 数据库E-R模型关系图
- 修改Visual Studio类模板添加版权注释信息
- Oracle 11g 安装教程
- ASP.NET MVC学习笔记07数据表和模型添加新字段
- 以太坊·电影院场景区块链应用探索
- 最全爬虫攻略:微博、APP、公众号一个不能少!
- 注册中心 Eureka 源码解析 —— Eureka-Client 初始化(一)之 EurekaInstanceConfig
- 无论人工智能发展到什么地步,都离不开这6段代码
- Dubbo源码解析 —— 逻辑层设计之服务降级
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- GoPro Arduino控制库.阅读源码.1
- [漏洞复现] 二.Windows远程桌面服务漏洞(CVE-2019-0708)复现及详解
- 本地scratch-gui和blockly安装
- 用Python打造一款文件搜索工具,所有功能自己定义!
- 解决SSH登录缓慢
- Html ul、li Css标签详解 使用图片自定义样式 隐藏小点样式齐全
- TRTC Android端开发接入学习之实现视频通话(五)
- 让WordPress默认用户无法进入后台
- 图像处理笔记(2)----OpenCV imread函数详解
- 面试官:来写个代码求一下两个数的最大公约数吧
- 聊聊BitCaskLock
- 自动化构建工具~Maven
- 聊聊BitCaskKeyDir
- 使用 Node.js 定制你的技术雷达:上篇
- css画div对角线