JSX

- *问题引入
一、jsx
- 1.1 基本使用步骤
- 1.2 嵌入JavaScript 表达式
二、条件渲染
三、列表渲染
四、样式处理
- 4.1.行内样式 —— style
- 4.2.类名 —— className（推荐）

*问题引入

react中自带创建节点的方法createElement() ：

React.createElement(type,[props],[...children]
)
参数一：必填，类似HTML标签名称，如: ul, li
参数二：选填，属性，如className
参数三：选填, 子节点

创建节点代码如下：

看图可知这个方式创建缺点多：代码繁琐不简洁，结构不清晰，用户体验差

于是我们引入JSX，代码如图：

一、jsx

JSX，全称JavaScript XML。
顾名思义，它表示在 JavaScript 代码中写 XML（HTML）格式的代码。
JSX 是 React 的核心内容。

优点：简洁、结构清晰

1.1 基本使用步骤

1.创建 react 元素：
const title = <h1>Hello JSX</h1>

推荐写法：(避免 JS 中的自动插入分号陷阱)

const title = (<h1>Hello JSX</h1>`
)

2.使用 ReactDOM.render() 方法渲染 react 元素到页面中
ReactDOM.render(title, root)

tip：
a. React元素的属性名使用驼峰命名法
b. 特殊属性名：class -> className、tabindex -> tabIndex 。
c. 没有子节点的React元素可以用 /> 结束。

1.2 嵌入JavaScript 表达式

语法：{ JavaScript表达式 }

示例：

const name = 'erya'
const box = (<div>I’m ：{name}, 出生的年份：{1992+8}</div><p>{3>5?'大于':'小于等于'}
)

注意点：

可以调用函数表达式
JSX 自身也是 JS 表达式
不能在{}中出现语句（比如：if/for 等）

二、条件渲染

条件渲染：根据条件渲染特定的 JSX 结构
可使用 if/else 或三元运算符 ?: 或逻辑与运算符 && 来实现

场景：loading效果，根据isLoading的true/false值来判定现在是否渲染loading效果

方法一：if/else

const isLoading = falseconst loadData = () => {if (isLoading) {return <div>loading...</div>}return <div>加载完成，展示数据</div>
}
const title = (<h1>条件渲染： {loadData()}</h1>
)

方法二：?:

const loadData = () => {return isLoading ? (<div>loading...</div>) :(<div>加载完成展示数据</div>)
}

方法三：&&

短路逻辑，和上面两种情况稍有不同，每个&&语句只能控制一种情况的显示（isLoading为true时才会显示&&后面的元素）

const loadData = () => {return isLoading && (<div>loading...</div>)
}

三、列表渲染

方法：数组的 map() 方法，需要一个唯一的key属性（尽量避免使用索引号作为key）！

原则： map遍历谁，就给谁添加key属性

const foods = [{id: 1, name: 'apple'},{id: 2, name: 'chocolate'},{id: 3, name: 'cake'},
]
const list = (<ul>{songs.map(item => <li key={item.id}>{item.name}</li>)}</ul>
)

四、样式处理

4.1.行内样式 —— style

style{}里的一定是个对象！

const list = (<h1 style={{ color: 'red', backgroundColor: 'blue' }}>hi</h1>
)

4.2.类名 —— className（推荐）

//index.js
const list = (<h1 className = "title" >hi</h1>
)

/*index.css*/
.text {text-align: center;
}

React-JSX详细语法及渲染使用相关推荐

react 数字转字符_深入浅出 React -- JSX
什么是 JSX JSX 是一个 JavaScript 的语法扩展.JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能在 React 中,JSX 仅仅是 React.crea ...
Airbnb React/JSX 编码规范
Airbnb React/JSX 编码规范算是最合理的React/JSX编码规范之一了内容目录基本规范 Class vs React.createClass vs stateless 命名声明 ...
项目解析jsx文件_React 基础：JSX 扩展语法
前言作为一个前端开发有些不好意思,居然还没有接触过 React ,就借这段时间积累下 React 相关经验,为疫情过后能有更多的就业机会. 如果你已经是个经验丰富的 React Developer ...
React 超详细入门教程
文章目录一,React简介 1.什么是React 2.React工作原理 3.React历史 4.React的特点 5. React 高效的原因 6.React 官方网站二,React基本使用 1 ...
Airbnb-你非常值得学习的 React/JSX 编码风格指南
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群作者:jiahao-c译 https://github.com/jiahao-c/javas ...
前端战五渣学React——JSX React.createElement() React.ReactElement()源码
最近<一拳超人>动画更新第二季了,感觉打斗场面没有第一季那么烧钱了,但是剧情还挺好看的,就找了漫画来看.琦玉老师真的厉害!!!打谁都一拳,就喜欢看老师一拳把那些上来就吹牛逼的反派打的稀烂, ...
前端React框架基础语法
一.ReactDOM.render()方法 ReactDOM.render()方法是React框架中最最最基础的方法,这个方法的作用是将模板转化为HTML的语法,然后插入到指定的 DOM 节点中. & ...
4、JSX 基本语法规则
JSX 基本语法规则上一篇博文稍微说了一下虚拟DOM 和真实DOM 的区别,这一篇我们稍微说一下 jsx 的一些语法规则,这个是在开发中经常遇到的,今天稍微过一下. 什么是 JSX JSX 全称 ...
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
目录一.VueJS是什么? 二.Vue的优缺点三.MVVM 数据双向绑定四.Vue的安装和使用五.Vue模板语法-文本渲染六.常用的vue的指令一.VueJS是什么? 它是一个轻量级MVV ...

React-JSX详细语法及渲染使用

JSX