react把表格渲染好ui_react 入坑笔记(五) - 条件渲染和列表渲染

条件渲染和列表渲染

一、条件渲染

条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI。

贴一个小栗子:

function UserGreeting(props) {

return

欢迎回来!

;

}

function GuestGreeting(props) {

return

请先注册。

;

}

function Greeting(props) {

const isLoggedIn = props.isLoggedIn;

if (isLoggedIn) {

return ;

}

return ;

}

ReactDOM.render(

// 尝试修改 isLoggedIn={true}:

,

document.getElementById('example')

);

当然,得益于 jsx 的语法,我们可以用变量来缓存元素或者组件:

function UserGreeting(props) {

return

欢迎回来!

;

}

function GuestGreeting(props) {

return

请先注册。

;

}

function Greeting(props) {

const isLoggedIn = props.isLoggedIn;

if (isLoggedIn) {

return ;

}

return ;

}

function LoginButton(props) {

return (

登陆

);

}

function LogoutButton(props) {

return (

退出

);

}

class LoginControl extends React.Component {

constructor(props) {

super(props);

this.handleLoginClick = this.handleLoginClick.bind(this);

this.handleLogoutClick = this.handleLogoutClick.bind(this);

this.state = {isLoggedIn: false};

}

handleLoginClick() {

this.setState({isLoggedIn: true});

}

handleLogoutClick() {

this.setState({isLoggedIn: false});

}

render() {

const isLoggedIn = this.state.isLoggedIn;

let button = null;

if (isLoggedIn) {

button = ;

} else {

button = ;

}

return (

{button}

);

}

}

ReactDOM.render(

,

document.getElementById('example')

);

阻止渲染的栗子:

function WarningBanner(props) {

if (!props.warn) {

return null; // 必须写 null,不写运行会报错

}

return (

警告!

);

}

class Page extends React.Component {

constructor(props) {

super(props);

this.state = {showWarning: true}

this.handleToggleClick = this.handleToggleClick.bind(this);

}

handleToggleClick() {

this.setState(prevState => ({

showWarning: !prevState.showWarning

}));

}

render() {

return (

{this.state.showWarning ? '隐藏' : '显示'}

);

}

}

ReactDOM.render(

,

document.getElementById('example')

);

注意:组件的 render 方法返回 null 并不会影响该组件生命周期方法的回调。例如,componentWillUpdate 和 componentDidUpdate 依然可以被调用。

二、列表渲染

列表渲染可以使用 js 中的 .map() 来进行。(map 返回一个经过逻辑处理的新数组)

function NumberList(props) {

const numbers = props.numbers;

const listItems = numbers.map((number) =>

{number}

);

return (

  • {listItems}

);

}

const numbers = [1, 2, 3, 4, 5];

ReactDOM.render(

,

document.getElementById('example')

);

和 vue 相同,需要给每个列表元素绑定一个 key,便于 React 识别哪些元素发生了变化。

function ListItem(props) {

return

{props.value};

}

function NumberList(props) {

const numbers = props.numbers;

const listItems = numbers.map((number) =>

);

return (

{listItems}

);

}

const numbers = [1, 2, 3, 4, 5];

ReactDOM.render(

,

document.getElementById('example')

);

注意:key 会作为给 React 的提示,但不会传递给组件,因此,组件并不会知道传递给它的 key。

在 jsx 中使用 map():

function ListItem(props) {

return

{props.value};

}

function NumberList(props) {

const numbers = props.numbers;

return (

{numbers.map((number) =>

value={number} />

)}

);

}

const numbers = [1, 2, 3, 4, 5];

ReactDOM.render(

,

document.getElementById('example')

);

对比一下,只是少了声明 listItems 语句,并把后面的 map() 搬到 jsx 中。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/566772.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

二进制除法移位相减_verilog移位相减实现除法(转载)

引言除法器在FPGA里怎么实现呢?当然不是让用“/”和“%”实现。在Verilog HDL语言中虽然有除的运算指令,但是除运算符中的除数必须是2的幂,因此无法实现除数为任意整数的除法,很大程度上限制了它的使用领域。并且多数综合工具对于…

python选课系统代码_python模拟选课系统

要求:角色:学校、学员、课程、讲师要求:1. 创建北京、上海 2 所学校2. 创建linux , python , go 3个课程 , linux\py 在北京开, go 在上海开3. 课程包含,周期,价格,通过学校创建课程4. 通过学校创建班级&am…

php验证密码后跳转_php-laravel框架用户验证(Auth)模块解析(四)忘记密码

一、忘记密码模块路由二、控制器解析跟注册、登录的控制器一样,大部分的逻辑使用trait引入。ForgotPasswordController:负责忘记密码页面,以及邮件发送四、扩展开发:自定义的忘记密码行为忘记密码有多种处理方式,这里默…

flume数据丢失与重复_Flume监听文件到kafka,文件通道,kafka消费重复问题

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼#me the components on this agenta1.sources r1a1.sinks k1a1.channels c1# Describe/configure the sourcea1.sources.r1.type execa1.sources.r1.command tail -F /usr/local/test1.txta1.sources.r1.fileHeader truea1.s…

MBSE系统工程是什么

MBSE(基于模型的系统工程)是现代系统工程的最新发展结果。 曾经的产品设计师利用纸笔绘制图版来制作产品和设计,在CAD这类三维建模软件的出现,让工程师们甩掉了图板和图纸,带来的效益大家都能理解。 目前系统工程师们…

python输出箭头代码_python matplotlib 注释文本箭头简单代码示例

注释文本箭头结果展示:完整代码示例:import numpy as npimport matplotlib.pyplot as pltfig,ax plt.subplots(figsize(5,5))ax.set_aspect(1)x1 -1 np.random.randn(100)y1 -1 np.random.randn(100)x2 1. np.random.randn(100)y2 1. np.random…

《数字孪生体技术白皮书》

导读:这几年,数字孪生体的概念炙手可热,越来越成为从工业到产业、从军事到民生各个领域的智慧新代表。数字孪生体实验室与安世亚太联合正式发布了《数字孪生体技术白皮书(2019)》。希望本白皮书能为业内同行提供参考&a…

python换行后开头有缩进_python编码规范(三)--空行,换行,缩进

1.空行空一行:用于类成员函数之间,或者用于区分不同逻辑块空两行:类与类,类与函数,函数与函数之间class Test(object):"""Test class,提供通用的方法"""def __init__(self):""…

数值计算软件有哪些?一款国产软件非常亮眼。

数值计算软件有哪些?一款国产软件非常亮眼。 数学软件由算法标准程序发展而来, 大致形成于70年代初期。随着几大数学软件工程的开展,如美国的NATS工程,人们探索了产生高质量数学软件的方式、方法和技术。 经过长期积累,已有丰富的、涉及广泛数…

linux 删除分区_详解linux系统架构--文件系统体系

概述之前已经对Linux系统架构的内核部分单独做了深入介绍,今天就拿Linux系统架构中的文件系统做一下介绍吧~先介绍下概念:文件系统是文件存放在磁盘等存储设备上的组织方法。Linux系统能支持多种目前流行的文件系统,如EXT2、 EXT3、EXT4、 FA…

什么是数字孪生,为什么对物联网很重要

数字孪生是物理设备的虚拟呈现,数据科学家和IT专业人员可以在开发实际项目之前使用数字孪生技术来模拟运行。数字孪生还改变了物联网、人工智能和数据分析等技术的优化方式。 什么是数字孪生? 数字孪生是指物理世界或系统的虚拟数字化呈现。数字孪生背后…

plsql如何查看mysql库_plsql 如何查看表数据库表

如何使用PLSQL Developer从oracle数据库 导入导出数据如何使用PLSQL Developer从oracle数据库 导入导出数据   用pl/sql developer导出表的数据时有三种方式:Oracle Export,Sql Insert,pl/sql developer   只有“Oracle Export”方式导出…

2020年工业软件的处境是“危”还是“机”?

2020年,工业软件发展所面临的“危机”,如同硬币的两面,在时代强光的照射之下尤其引人注目。硬币的A面首先是“危“。 2020年中,MATLAB等多家国外知名工业软件产品在国内多家机构被禁用,让很多业外人士都关注到了这一系…

GOF设计模式之桥接模式

一、引入 现需要提供能够绘制4种不同颜色且笔画粗细有大中小3种型号的画笔。 方法一:蜡笔 我们需要准备3*412支蜡笔,也就是说必须准备12个具体的蜡笔类 方法二:毛笔 只需要准备三种型号的毛笔,外加四个颜料盒,用347…

antd 设置表头属性_使用表数据自定义React Antd表头

In my React project, I need to customize antd table header as followsI have added sample code bellow.I need to have Sum of the amount in the header of the Amount columnSample Code:解决方案You can use title function like this for get total of amount fieldsc…

c6x Linux 内核中断分析

1. 内核中断介绍 1.1 中断简介 所有支持Linux的平台都采用了中断(interrupt)的概念,以便(因种种原因)引入周期性的中断。需要区分两种类型的中断。 1. 硬件中断(hardware interrupt)&#xff1a…

ccf 智能运维 裴丹_智能运维 聊一聊实时计算系统

本文是我在实时数据计算系统的设计、开发、运维生涯的一部分经验总结。主要介绍一些设计思路和常见问题的解决方案,不关注具体计算框架的使用。本人主要致力于监控系统数据计算方向,主要业务场景有:监控数据的ETL、数据汇聚、分析、异常检测等…

系统建模、分析、仿真和验证软件工具ModelCodoer

在安全关键领域,基于模型的软件工程已逐渐进入了我国的装备研制过程中。使用SimuLink或者SCADE等嵌入式软件建模工具进行可视化建模,然后生成高可靠的二进制代码逐渐成为了安全关键领域的主流软件开发方式。由迪捷软件自主研发的系统建模、分析、仿真和验…

php配置email支持_使用PHPMailer实现PHP发邮件功能

第一步:打开网址https://github.com/PHPMailer/PHPMailer/ 下载PHPMailer,PHPMailer 需要 PHP 的 sockets 扩展支持,而登录 QQ 邮箱 SMTP 服务器则必须通过 SSL 加密的, PHP 还得包含 openssl 的支持。第二步:使用 php…

如何构建裸机hello world目标程序并在SkyEye全数字实时仿真平台上运行及调试?

SkyEye全数字实时仿真平台,简称SkyEye,是一款支持 ARM、TI DSP、PowerPC、X86、SPARC、龙芯、飞腾等多种处理器体系架构的指令级仿真平台。 SkyEye可以部署在桌面计算机上,开发人员可以基于SkyEye提供的已有模型库的组件(如处理器…