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 ...
随机推荐
- robotframework之去除空格、去掉前面的0、增加空格换行符的方法,两个字符之间的拼接
1.去除空格 A)若需要去除两个拼接字符之间的空格,可以使用robotframework中的关键词Catenate,需要注意的是SEPARATOR=一定需要大写 B)若在一个字符串中存在空格,且需要去 ...
- java删除文件支持通配符
原文:https://blog.csdn.net/wdzayyt/article/details/7209530 感谢原作者 package com.covics.zfh; import java.i ...
- JS制作图片切换
<!DOCTYPE html> <html> <head> <title>纯JS制作简单的图片切换</title> <meta cha ...
- update_engine-整体结构(一)
update_engine简介 update_engine是A/B升级的核心逻辑.理解了update_engine就理解了在Android系统中A/B升级是如何运行的.它的代码放在源码目录下syste ...
- vue实现原理
1.数据监控(data):监听data属性: new Vue之后内部扫描data属性值,用 Object.defineProperty(obj,name,{ set:value=>{ obj[_ ...
- 【Leecode】两数之和
学习使用标准模板库(STL)中的map,hash_map.涉及数据结构知识:哈希表,红黑树. map的使用方法 https://www.cnblogs.com/fnlingnzb-learner/p/ ...
- 如何开启 MySQL InnoDB 共享表空间和独立表空间
修改数据库的表空间管理方式 修改my.ini文件的innodb_file_per_table的参数值即可,但是修改不能影响之前已经使用过的共享表空间和独立表空间: innodb_file_per_ta ...
- Web高级 Ajax和跨域CORS
Asynchronous JavaScript and XML 1. XMLHttpRequest 前端开发都知道,不多说. var xhr = new XMLHttpRequest(); xhr.o ...
- 51nod 1162 质因子分解
https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1162 数据范围大约是2^97,需要高精度计算 可以使用pollard- ...
- C# 6.0:在catch和finally中使用await
Asyn方法是一个现在很常用的方法,当使用async和await时,你或许曾有这样的经历,就是你想要在catch块或finally块中使用它们,比如当出现一个exception而你希望将日志记在文件或 ...