上篇主要和大伙唠了下面几点:
- React - All In JavaScript 旨意
- React - JSX 语法初窥
本篇则会继续 JSX
语法回顾,当然,不止于介绍,会着眼于示例,上手最佳
React - JSX 表达式之函数
再来一个 JSX
看起来像是在 HTML
里使用函数的示例
// React
const getEmail = () => {
return <a>suanzao@wacai.com</a>
}
<div>
<span>醒途 Email:{getEmail()}</span>
</div
能够发现在 JSX
语法中,JSX
书写的元素(React
元素)能够被当作变量以及返回值等形式去使用
就可以随意的使用 JavaScript
去操作它,非常的方便
表达式则是需要使用花括号包住,如上面代码在页面被访问渲染时,花括号位置会被渲染为 getEmail
这个函数的返回值
React - JSX 表达式之数组
const list = [<a>百度</a>, <a>阿里</a>, <a>腾讯</a>]
// React 语法
<div>{list}</div>
// 页面实际渲染元素
<div>
<a>百度</a>
<a>阿里</a>
<a>腾讯</a>
</div>
在页面上渲染时,JSX
会把数组表达式自动展开,最终呈现在页面上是数组内的元素依次顺序排列
React - JSX 表达式之三元运算
const list = [<a>百度</a>, <a>阿里</a>, <a>腾讯</a>]
let isShow = false
// React 语法
<div>
isShow ? {list} : null
</div>
// isShow 值为 False
// 页面不会将 list 渲染显示,实际页面元素如下
<div>
</div>
React - JSX 表达式之属性值
const imgUrl = 'http://imgurl'
// 元素的属性书写与原生书写无异
// 只不过属性值可以使用表达式来进行赋值,如下所示
<div>
<img src={imgUrl} />
</div>
React - JSX 表达式之事件
const list = [<a>百度</a>, <a>阿里</a>, <a>腾讯</a>]
let isShow = false
const rootClick = () => {
isShow = true // 伪代码,实际修改状态会使用到 hooks,后续会讲
}
// 事件和属性值书写方式相同,和原生区别也仅表现在事件值可使用表达式
// 明显地:元素事件和 Vue API 不同,React 事件基本是如:onChange 等类原生的命名
<div onClick={rootClick}>
isShow ? {list} : null
</div>
// 当点击外层元素时,会触发 rootClick 事件,将 isShow 值设为 True
// 此时页面显示如下
<div>
<a>百度</a>
<a>阿里</a>
<a>腾讯</a>
</div>
React - JSX 表达式之行内样式
// 一、
// style 行内样式同样是属性,因此可以使用表达式
// style 接收的数据类型是一个对象,对象里使用驼峰命名,数值单位可省略默认为 px
const linkStyle = { color: "pink", marginRight: 10 }
const list = [<a style={linkStyle}>百度</a>, <a>阿里</a>, <a>腾讯</a>]
let isShow = false
const rootClick = () => {
isShow = true // 伪代码,实际修改状态会使用到 hooks,后续会讲
}
// 二、
// 若不使用变量,也可直接把对象写在属性值花括号内,此时是两个花括号,有点好看哦
<div onClick={rootClick} style={{ color: "yellow" }}>
isShow ? {list} : null
</div>
React - JSX 表达式之 ClassName
// 元素的类名属性为 className,不是 class
<div className="name">醒途</div>
除上述外,还有其它一些 JSX
基础语法,实际都是使用 JavaScript
的形式书写和操作元素,不作一一展示
本篇为 React
系列第 2
篇
vx👦:mmm7nnn
公号🐓:醒途
邮箱📧:suanzao@wacai.com(欢迎找我内推)
如果喜欢这个系列请给我一个点赞👍或者一个关注➕,诸君的支持是我创作的最大的动力