【React 基础二】JSX 语法基本使用

395 阅读2分钟

这是我参与11月更文挑战的第11天,活动详情查看:2021最后一次更文挑战

上篇 主要和大伙唠了下面几点:

  • React - All In JavaScript 旨意
  • React - JSX 语法初窥

本篇则会继续 JSX 语法回顾,当然,不止于介绍,会着眼于示例,上手最佳 ​

下篇带上 React 环境速搭

以下正文

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(欢迎找我内推)

如果喜欢这个系列请给我一个点赞👍或者一个关注➕,诸君的支持是我创作的最大的动力 ​