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> )
-