只需5分钟教会你使用React中的JSX

JSX的基本使用

createElement()的问题

编写繁琐不简洁
非常的不直观，无法直接看出结构
不优雅，用户体验不好
JSX写法

JSX简介

JSX是Javascript的一种语法拓展
JSX是JavaScript XML简写，表示在JavaScript中编写XML格式代码（也就是HTML格式）

优势：

声明式语法更加直观
与HTML结构相同
降低了学习成本、提升开发效率

JSX是react的核心

使用

使用JSX语法创建react元素

const title = <h1 >HELLO</h1>

使用ReactDOM.render()方法渲染react到页面中

ReactDOM.render(title,document.getElementById('root')
);

注意点

React元素的属性名使用驼峰命名法
特殊属性名：class -> className、for -> htmlFor、tabindex-> tablndex

class属性：

没有子节点的React元素可以使用<span/>结束
使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱（推荐）

JSX中使用JavaScript表达式

嵌入JS表达式

数据储存在JS中
语法：{JavaScript表达式}
注意：语法中是单花括号，不是双花括号

const name = '张三'const title = (<h1 className="title">HELLO {name}</h1>
)

注意

单花括号中可以使用任意的JavaScript表达式

const title = (<h1 className="title"><p>{1}</p><p>{1 + 1}</p><p>{'HELLO'}</p><p>{10 < 5 ? '是的' : '不是'}</p></h1>
)

JSX自身也是JS表达式

const p = (<p>HELLO</p>
)
const title = (<h1 className="title">{p}</h1>
)

JS中的对象是一个例外，一般只会出现在style属性中
不能在{}中出现语句（例如：if/for等等）

JSX条件渲染

场景：文字的显示不同
根据条件渲染特定的JSX结构

const isShow = false
const show = () => {if (isShow) {return <div>我是true</div>}return (<div> 我是false</div>)
}
const title = (<h1 className="title">{show()}</h1>
)

-可以使用id/else或三元运算符或逻辑与运算符实现

三元：

const isShow = true
const show = () => {return isShow ? (<div>我是true</div>) : (<div>我是false</div>)
}
const title = (<h1 className="title">{show()}</h1>
)

逻辑与：

const isShow = true
const show = () => {return isShow && (<div>显示</div>)
}
const title = (<h1 className="title">{show()}</h1>
)

JSX的列表渲染

渲染一组数据，使用数组的map()方法

const names = [{ id: 1, name: '张三' },{ id: 2, name: '李四' },{ id: 3, name: '王五' },{ id: 4, name: '赵四' },{ id: 5, name: '刘能' }
]
const title = (<ul className="title">{names.map(item => <li>{item.name}</li>)}</ul>
)

但是会有报错

意思就是没有key值我们设置一下即可

const names = [{ id: 1, name: '张三' },{ id: 2, name: '李四' },{ id: 3, name: '王五' },{ id: 4, name: '赵四' },{ id: 5, name: '刘能' }
]
const title = (<ul className="title">{names.map(item => <li key={item.id}>{item.name}</li>)}</ul>
)

此时就不报错了

渲染列表时应该添加key属性，属性值要保证唯一
map()遍历谁，就给谁+key属性
尽量避免使用索引号作为key值

JSX样式处理

行内样式 ----style

const title = <h1 style={{ color: 'red', backgroundColor: '#000' }}>HELLO</h1>

类名 — className（强烈推荐）

只需5分钟教会你使用React中的JSX相关推荐

只需3分钟，就能轻松创建一个SpreadJS的React项目
概述 SpreadJS 纯前端表格控件 V11.2(SP2) 已经全面支持了 React 的拓展.接下来我们看下如何利用3分钟快速创建一个 SpreadJS 的 React 项目. 1.新建React ...
深度学习所需显存_只需10分钟即可学习基本的Flexbox
深度学习所需显存 by Justin Yek 贾斯汀·耶克(Justin Yek) 只需10分钟即可学习基本的Flexbox (Learn basic Flexbox in just 10 minut ...
晚上，睡前只需1分钟，一觉到天亮！
快节奏的生活谁都有压力大的时候,压力一大就影响睡眠,觉睡不好就影响到隔天的工作表现,就一直恶性循环下去,让你天天心情差,状态又不好,怎么办? 其实,只要睡前来个睡前操,只需1分钟,就能让你轻松入睡,一 ...
java和python的比较-如何对比Python和Java，只需三分钟告诉你！
原标题:如何对比Python和Java,只需三分钟告诉你! Java和Python两门语言都是目前非常热门的语言,可谓北乔峰南慕容,二者不分上下,棋逢对手.但是对于初学者来说,非常困惑,因为时间和精力 ...
red hat安装宝塔_只需几分钟即可安装Red Hat Container Development Kit（视频）
red hat安装宝塔自从我开始使用各种形式的OpenShift(例如带盒的Online,然后又作为容器化的图像)玩耍以来,没有什么比Red Hat Container Development Ki ...
只需几分钟即可安装Red Hat Container Development Kit（视频）
自从我开始使用各种形式的OpenShift(例如带盒的Online,然后又作为容器化的图像)玩耍以来,没有什么比Red Hat Container Development Kit(CDK)的可用性令我 ...
3d打印英语文献_锐医学院 | 只需10分钟！解读康复医学文献+英语学习
文献解读+英语学习只需10分钟锐医学院致力于专业康复教育培训同时,也在康复领域专家的合作下,一直在研究康复领域最前沿所取得的研究成果.存在的问题以及发展趋势进行系统和全面的叙述和评论与各领域康复专 ...
看后至少多活十年－－只需十分钟
看后至少多活十年--只需十分钟看后至少多活十年--只需十分钟 -北大齐教授健康讲座笔录- 看后至少多活十年!!!~~~~不要死于无知~~~~不但要保养好自己,回家也要告诉父母这么做~~~~这是好东西 ...
纸片人「活」了。Meta AI新作：只需几分钟，手绘小人有了灵魂
想让画中的「纸片人」有生命,Meta AI来搞定!昨日,Meta AI宣布了一种独创性方法,只需几分钟,就能动画化儿童手绘的角色,效果拔群. 快看,「纸片人」居然自己跳出来了! 小猫学会了hiphop ...

只需5分钟教会你使用React中的JSX

JSX的基本使用

createElement()的问题

JSX简介

使用

注意点

JSX中使用JavaScript表达式

嵌入JS表达式

注意

JSX条件渲染

JSX的列表渲染

JSX样式处理

只需5分钟教会你使用React中的JSX相关推荐

最新文章

热门文章