React条件渲染
传参判断
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 = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
ReactDOM.render(
<LoginControl />,
document.getElementById('example')
);
React条件渲染的更多相关文章
- 2017.11.7 ant design - upload 组件的使用, react 条件渲染以及 axios.all() 的使用
一.主要任务:悉尼小程序管理后台,添加景点页面的开发 二.所遇问题及解决 1. 上传多个不同分类音频信息时,如中文音频和英文音频,要求音频不是放在一个数组中的,每个音频是一个独立的字段,此时: < ...
- React——条件渲染
在React中,你可以创建各种不同的组件,然后根据应用的状态渲染出它们其中的一般部分. 一.用变量存储元素 可以将元素保存到一个变量中,通过为变量赋不同的值去渲染不同的元素 function Logi ...
- 【react 条件渲染】在render的html中使用 三元运算符 进行条件渲染
return ( {renderedPages.map(page => ( <Button key={page} onClick={() => onPageChange(page)} ...
- &&运算符,三木运算符与React的条件渲染
在使用react框架的时候中往往会遇到需要条件渲染的情形,这时候,许多人会设想采用if语句来实现,比如下面,当满足条件condition时,conditonRender渲染组件ComponentA,当 ...
- react初探(一)之JSX、状态(state)管理、条件渲染、事件处理
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技术栈为react,目前我的情况是三大框架只会angular和Vue.在实际项目中只使用过一次angular5,其余项目都是使用Vue写的.写篇 ...
- react 入坑笔记(五) - 条件渲染和列表渲染
条件渲染和列表渲染 一.条件渲染 条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...
- angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...
- React文档(八)条件渲染
在React中,你可以创建不同的组件各自封装你需要的东西.之后你可以只渲染其中的一部分,这取决于应用的state(状态). 条件渲染在React里就和js里的条件语句一样.使用js里的if或者条件表达 ...
- React学习笔记(七)条件渲染
React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...
随机推荐
- MySQL数据库 命令行 学习笔记(一)
常用关系型数据库1 MySQL:开源免费的适用于中小型企业的免费数据库2 oracle:甲骨文公司,商业软件,收费,适用于大型电商网站3 db2:IBM公司,银行系统主要采用db24 SqlSever ...
- magento 1.9 nginx 404
原来的nginx 配置 lnmp 环境默认的 location ~ [^/]\.php(/|$) { fastcgi_param SCRIPT_FILENAME $document_root$fast ...
- S50 抓取pattern数据
S50(原V50) 测试机台湾久元电子研发的一款数字芯片测试系统,行业内有很多人使用: 现在记录下S50抓取pattern数据的一些方法: 程序主要是通过read_log配合c代码实现,pattern ...
- MySQL 设置root密码报错:mysqladmin: connect to server at 'localhost' failed
MySQL 设置root密码报错:mysqladmin: connect to server at 'localhost' failed 1.安装完MySQL设置root密码报错如下 [root@vm ...
- libvirt启动报错Failed to start Virtualization daemon
libvirt启动报错Failed to start Virtualization daemon 1.启动libvirt的具体报错如下 [root@localhost IOS]# service li ...
- HashTable & HashMap & ConcurrentHashMap 原理与区别
一.三者的区别 HashTable HashMap ConcurrentHashMap 底层数据结构 数组+链表 数组+链表 数组+链表 key可为空 否 是 否 value可为空 否 是 否 ...
- ASP.NET CORE 3 安装遇到的问题
最近在研究 ASP.NET CORE, visualstudio2019 也已正式发布,本以为安装vs2019后就默认支持asp.net core 3,谁知是不支持的,需单独安装net core 3及 ...
- react的学习笔记
React中几个核心的概念### 虚拟DOM(Virtual Document Object Model) + **DOM的本质是什么**:浏览器中的概念,用JS对象来表示 页面上的元素,并提供了操作 ...
- css -理解盒模型
标准模式: 总宽度/高度=width/height+padding+border+margin 怪异模式(quirks 模式): 总宽度/高度=width/height + margin = 内容区宽 ...
- no module named win32api
1 首先下载pywin32 https://sourceforge.net/projects/pywin32/files/pywin32/ 2进入虚拟环境 D:\env\jdscrapy\Lib\si ...