react 也就这么回事 02 —— JSX 插值表达式、条件渲染以及列表渲染
我们已经学会了 React 创建元素和渲染元素
ReactDOM.render(<div>Hello React!</div>, document.getElementById("root"));
Hello React
会被嵌入到<div>
标签中,并且显示在页面上。
那么 React 如何将变量、算术运算、函数调用等表达式的结果显示在页面上呢?
插值表达式
React 提供了在 JSX 中嵌入表达式的方式,我们可以将表达式包裹在大括号中,并将它嵌入 JSX 中
在下面的例子中,我们声明了一个名为 name 的变量,然后在 JSX 中使用它
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
{name}
这种用大括号包裹一个表达式的写法被称为“插值表达式”
在 JSX 语法中,你可以在大括号内放置任何有效的 JavaScript 表达式。例如,2 + 2
,user.firstName
或 formatName(user)
都是有效的 JavaScript 表达式。
你甚至可以在大括号中放置 JSX,因为 JSX 本身就是一个表达式。编译之后,JSX 表达式会被转换成普通的 JavaScript函数调用
不同数据类型在插值表达式中的表现
虽然可以在大括号中放置任何有效的 JavaScript 表达式,但是并不是所有数据类型都能显示在页面上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
let data1 = "Hello React!";
let data2 = 1;
let data3 = true;
let data4 = undefined;
let data5 = null;
let data6 = [1, 2, 3];
// let data7 = { name: "react" };
let data7 = "object";
let el = (
<div>
<div>{data1}</div>
<div>{data2}</div>
<div>{data3}</div>
<div>{data4}</div>
<div>{data5}</div>
<div>{data6}</div>
<div>{data7}</div>
</div>
);
ReactDOM.render(el, document.getElementById("root"));
</script>
</html>
我们将不同数据类型的数据用大括号包裹,尝试将它们显示在页面上
经过观察可以发现:
undefined
、null
不会在页面上显示- 数组
[1, 2, 3]
显示在页面上会变成:123
- 对象则会报错
那么如何正确显示数组以及对象呢?此处暂且不表
条件渲染
在 React 中,你可以依据应用的不同状态,只渲染对应状态下的部分内容,即条件渲染
条件渲染的其中一个方式就是:在插值表达式中使用与运算符&&
或者三目运算符condition ? true : false
let data = "Hello React!";
// let state = true;
let state = false;
let el = (
<div>
<div>{state && "state为true时显示"}</div>
<div>{state ? "state为true时显示" : "state为false时显示"}</div>
</div>
);
ReactDOM.render(el, document.getElementById("root"));
列表渲染
在大括号中直接插入数组,并不能将数组元素逐一显示
let data = [1, 2, 3];
let el = (
<div>
{data}
</div>
);
ReactDOM.render(el, document.getElementById("root"));
// 页面显示:123
如果我们想让数组的每个元素逐一通过<li>
显示,可以借助函数逐一创建<li>
,然后将函数插入插值表达式中
示例如下:
let data = [1, 2, 3];
const toList = (list) => {
let ret = [];
list.forEach((element) => {
ret.push(<li>{element}</li>);
});
return ret;
};
let el = <ul>{toList(data)}</ul>;
ReactDOM.render(el, document.getElementById("root"));
在这个示例中,我们用forEach
遍历数组,使用 JSX 创建 React 元素,将每个数组元素都用<li>
标签包裹,得到了新的数组[<li>1</li>, <li>2</li>, <li>3</li>]
又在<ul>{toList(data)}</ul>
中通过插值表达式来将新数组嵌入到<ul>
元素中
我们已经知道了{}
中的数组显示规则:去掉[]
和,
于是最终得到:
let el = (
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
);
回过头来看函数toList
:用已有数组生成新数组
我们可以用map
方法和箭头函数来进一步简化这个方法:
const toList = (list) => list.map((element) => <li>{element}</li>);
公众号【前端嘛】
react 也就这么回事 02 —— JSX 插值表达式、条件渲染以及列表渲染的更多相关文章
- react 入坑笔记(五) - 条件渲染和列表渲染
条件渲染和列表渲染 一.条件渲染 条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...
- angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...
- vue简介,插值表达式,过滤器
目录 VUE框架介绍 what?什么是vue? why?为什么要学习vue? special特点? how如何使用? 下载安装? 导入方式? 挂在点el 插值表达式 delimiters自定义插值表达 ...
- [Vue入门及介绍,基础使用、MVVM架构、插值表达式、文本指令、事件指令]
[Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...
- React文档翻译系列(三)JSX简介
# React文档翻译系列(三)JSX简介 先来看一下下面的变量声明: ``` const element = Hello world! ``` 这种有趣的标签语法既不是字符串也不是HTML. 这种形 ...
- react实战项目开发(2) react几个重要概念以及JSX语法
前言 前面我们已经学习了利用官方脚手架搭建一套可以应用在生产环境下的React开发环境.那么今天这篇文章主要先了解几个react重要的概念,以及讲解本文的重要知识JSX语法 React重要概念 [思想 ...
- angular,vue,react的基本语法—插值表达式,渲染数据,响应式数据
基本语法: 1.插值表达式: vue:{{}} react:{} angular:{{}} 2.渲染数据 vue js: export default{ data(){ return{ msg:&qu ...
- React 学习(五) ---- 条件和列表渲染
条件渲染 React中的条件渲染和我们平常写的js 代码一样,都是用的if else, 只不过在if else 中它的返回值是jsx, 根据不同的条件渲染不同的UI. 先写两个组件 //登录的用户显示 ...
- React:快速上手(3)——列表渲染
React:快速上手(3)——列表渲染 使用map循环数组 了解一些ES6 ES6, 全称 ECMAScript 6.0 ,是 JaveScript 的下一个版本标准,2015.06 发版.ES6 主 ...
随机推荐
- 【Java】Collections
文章目录 Collections reverse(List) shuffle(List) sort(List) sort(List,Comparator) swap(List,int, int) Ob ...
- MySQL的学习记录 DAY03~
小记:昨天打了新冠加强针,今天开始拉肚子,嗓子疼,超级难受~
- unity3d,java,c#,python,rospy的socket通信测试
1.C#在与其他人通信时,最好不要用tcpclient来承接其他语言,会收不到用户名,最好都用socket. 2.unity3d在与java通信时,对方返回我unity3d发的数据流会打印收到一个类, ...
- 学习axios必知必会(1)~axios基本介绍、axios配置、json-server接口模拟工具
一.axios基本介绍 1.axios(前端最流行的 ajax 请求库) 特点: ① 基于 xhr + promise 的异步 ajax 请求库 ② 浏览器端/node 端都可以使用 ③ 支持请求/响 ...
- BAT经典面试题之redis的热KEY问题怎么解决
引言 讲了几天的数据库系列的文章,大家一定看烦了,其实还没讲完...(以下省略一万字).今天我们换换口味,来写redis方面的内容,谈谈热key问题如何解决.其实热key问题说来也很简单,就是瞬间有几 ...
- openstack,docker,mesos,Kubernetes(k8s)
作者:张乾链接:https://www.zhihu.com/question/62985699/answer/204233732来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- centos7语言更改
vim /etc/locale.conf 把 LANG="en_US.UTF-8" 改为 LANG="zh_CN.UTF-8"
- Oracle dg 状态校验
查看主库状态: select open_mode,protection_mode,database_role,switchover_status from v$database; OPEN_MODE ...
- python13day
昨日回顾 生成器:生成器就是迭代器,生成器是自己用python代码构建的 生成器函数 生成器表达式 python内部提供的 如何判断函数和生成器函数 yield yield return 吃包子的区别 ...
- jsp 4-15