JSX 语法详解 在之前的 react 基础文章中,创建元素使用的是 React.createElement() 方法,利用方法创建单层元素还算可以,可是如果出现嵌套结构,使用这种方法就会比较繁琐而且不直观,接下来咱们就讲讲 JSX 语法 1. 什么是 JSX JSX即JavaScript XML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖,也是react.js的使用基础。React在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此推荐使用JSX。这个是官网:http://facebook.github.io/jsx/ 2. JSX 的基本使用 2.1 为什么使用 JSX 原因一:使用 React.createElement() 创建元素比较繁琐,不简洁 原因二:代码不简洁,无法一眼就看出结构层次 例如: React.createElement( 'div', null, React.createElement('h1', null, '购物列表'), React.createElement('ul', null, React.createElement('li', null, '华为'), React.createElement('li', null, 'iPhone') ) ) 1 2 3 4 5 6 7 2.2 JSX 简介 JSX 是 JavaScript XML 的简写,表示 JavaScript 代码中写 XML(HTML)格式的代码 优势:声明式语法更加直观、与 HTML 结构相同,降低了学习成本、提升开发效率 JSX 是 react 的核心内容 利用 React.createElement() 方法创建元素 React.createElement( 'div', null, React.createElement('h1', null, '购物列表'), React.createElement('ul', null, React.createElement('li', null, '华为'), React.createElement('li', null, 'iPhone')) ) 1 2 3 4 可以看出来这样的写法很不直观 JSX 语法 <div> <h1>购物列表</h1> <ul> <li>华为</li> <li>iPhone</li> </ul> </div> 1 2 3 4 5 6 7 利用 JSX 语法,结构清晰,就是平时写的 HTML 标签 2.3 使用步骤 使用 JSX 语法创建react 元素 // JSX 语法 const el = (<h1>Hello JSX!</h1>) 1 2 使用 ReactDOM.render() 方法渲染 react 元素到页面中 // 渲染 ReactDOM.render(el, document.querySelector('#root')) 1 2 2.4 注意点 react 元素的属性名使用驼峰命名法:tabindex --> tabIndex 特殊属性名: class --> className 、for --> htmlFor 在 react 中所有的标签都必须闭合,无论是单标签还是双标签 推荐:使用小括号包裹 JSX 结构,从而避免 JS 中的自动插入分号陷阱 3. JSX 中使用 JavaScript 表达式 思考 JSX 语法是好用,但是这和写静态 HTML 标签好像没有区别 如何动态显示数据?实际应用一般都是从服务器获取数据,并将数据显示在页面中 猜想一下,既然 JSX 是直接写在 JS 中的,那 JS 当中的变量或函数应该可以在 JSX 中访问 const data = 'OPPO' render() { return ( <div> <h1>购物列表</h1> <ul> <li>华为</li> <li>iPhone</li> <li>{data}</li> </ul> </div> ) } 1 2 3 4 5 6 7 8 9 10 11 12 13 3.1 嵌入 JS 表达式 语法:{JavaScript表达式} const name = '小明' const dv = ( <div>你好,我叫:{name}</div> ) 1 2 3 4 注意点 单打括号中可以是任意的 JavaScript 表达式,如:三元表达式,加减乘除,数组,字符串 单大括号中不能出现语句(例如:if/for等) JS 对象一般只会出现在style属性中 4. JSX 的条件渲染 思考 条件渲染:根据不同条件渲染不同的 JSX 结构 典型场景:Ajax 异步请求数据中的 loading 效果 结合之前的知识,猜想该如何实现 虽然在 JSX 中无法直接写 if/else 判断,但是可以嵌入函数表达式 在函数表达式中进行 if/else 判断 4.1 条件渲染实现 可以在函数表达式中使用 if/else 或者三元运算符来实现 const loadData = () => { if(idLoading) { return <div>数据加载中...</div> } else { return <div>数据加载完成</div> } } const load = ( <div> {loadData()} </div> ) 1 2 3 4 5 6 7 8 9 10 11 12 13 5. JSX 的列表渲染 思考 实际开发中前端拿到的数据结构 const books = [ {id: 1, name: 'React'}, {id: 2, name: 'Vue'}, ] 1 2 3 4 如何转化为下面的这种结构 const books = [ <li>React</li>, <li>Vue</li>, ] 1 2 3 4 5.1 列表渲染实现 通过遍历数组的方法 map Array.prototype.map() const list = ( <ul> {books.map(item => <li>{item.name}</li>)} </ul> ) 1 2 3 4 5 6. JSX 的样式处理 行内样式 - style <h1 style={{ color: 'red', backgroundColor: 'skyblue' }}> JSX的样式处理 </h1> 1 2 3 类名 - className 需要使用 import '样式文件路径/样式文件名称.css’导入样式文件 ,title类在xxx.css文件中定义好 <h1 className="title"> JSX的样式处理 </h1> 1 2 3 总结 JSX 是React 的核心内容 JSX 表示在JS代码中写HTML结构,是React声明式的体现 使用 JSX 配合嵌入的 JS 表达式、条件渲染、列表渲染,可以描述任意 UI 结构 推荐使用 className 的方式给JSX添加样式 ———————————————— 版权声明:本文为CSDN博主「新时代农民工Top」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/web00_11/article/details/121315226
标签:React,转载,const,语法,createElement,null,JSX From: https://www.cnblogs.com/zaleswift/p/16724715.html