传参判断

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条件渲染的更多相关文章

  1. 2017.11.7 ant design - upload 组件的使用, react 条件渲染以及 axios.all() 的使用

    一.主要任务:悉尼小程序管理后台,添加景点页面的开发 二.所遇问题及解决 1. 上传多个不同分类音频信息时,如中文音频和英文音频,要求音频不是放在一个数组中的,每个音频是一个独立的字段,此时: < ...

  2. React——条件渲染

    在React中,你可以创建各种不同的组件,然后根据应用的状态渲染出它们其中的一般部分. 一.用变量存储元素 可以将元素保存到一个变量中,通过为变量赋不同的值去渲染不同的元素 function Logi ...

  3. 【react 条件渲染】在render的html中使用 三元运算符 进行条件渲染

    return ( {renderedPages.map(page => ( <Button key={page} onClick={() => onPageChange(page)} ...

  4. &&运算符,三木运算符与React的条件渲染

    在使用react框架的时候中往往会遇到需要条件渲染的情形,这时候,许多人会设想采用if语句来实现,比如下面,当满足条件condition时,conditonRender渲染组件ComponentA,当 ...

  5. react初探(一)之JSX、状态(state)管理、条件渲染、事件处理

    前言: 最近收到组长通知我们项目组后面新开的项目准备统一技术栈为react,目前我的情况是三大框架只会angular和Vue.在实际项目中只使用过一次angular5,其余项目都是使用Vue写的.写篇 ...

  6. react 入坑笔记(五) - 条件渲染和列表渲染

    条件渲染和列表渲染 一.条件渲染 条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...

  7. angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例

    基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...

  8. React文档(八)条件渲染

    在React中,你可以创建不同的组件各自封装你需要的东西.之后你可以只渲染其中的一部分,这取决于应用的state(状态). 条件渲染在React里就和js里的条件语句一样.使用js里的if或者条件表达 ...

  9. React学习笔记(七)条件渲染

    React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...

随机推荐

  1. myql 格式化日期

    date_format(a.balance_date,'%Y-%m')= date_format(#{balanceDate},'%Y-%m')

  2. cocos2dx lua invalid 'cobj' in function 'lua_cocos2dx'

    解决方法 在创建 Node节点后 调用父节点 retain() 方法 手动增加引用 一般调用:clone()方法会出现,在变量后面加上对一个对应的retain() 方法

  3. 微信小程序计算金额长度异常解决办法

    今天在做微信小程序,在测试的时候偶然出现了一些问题,如下图. 心中的一阵不爽猛然袭来,完全是搞事情哈! 然后经过一番探索,用toFixed方法搞定了,此方法是对值进行四舍五入的. 解决后点了一大堆控制 ...

  4. bash: ./LM35_make_fs: Permission denied 解决办法

    执行命令的时候 ./LM35_make_fs 遇到 permission denied, bash: ./LM35_make_fs: Permission denied权限的问题,可以运行 ls -l ...

  5. Xshell5 提示要继续使用此程序,您必须应用最新的更新或使用新版本

    Xshell5 提示要继续使用此程序,您必须应用最新的更新或使用新版本   目录 问题描述 修改系统时间 安装新版本 下载 安装 回到顶部 问题描述 今天上线一个服务,上完准备看下OPS的发布结果,就 ...

  6. keepalived+mysql主从环境,keepalived返回值是RST,需求解决方法?

    环境描述: mysql版本5.6.37    keepalived-1.2.19    系统centos 7:3.10.0-514.26.2.el7    web是:windows  server 2 ...

  7. 报错:/usr/sbin/mysqld: Can't find file: './performance_schema/events_waits_summary_by_account_by_event_name.frm' (errno: 13 - Permission denied)

    报错背景: Linux环境下安装MySQL数据库. 安装完成,数据库初始化,启动数据库时报错. 报错现象: -- :: [ERROR] Native table 'performance_schema ...

  8. UC登录功能:商户需要创建的表

    1:类似PHP的hash_hmac DELIMITER ;; CREATE DEFINER=`root`@`%` FUNCTION `uc_session_hmacsha1`( `_secretkey ...

  9. Mysql-12条优化技巧

    应用程序慢如牛,原因多多,可能是网络的原因.可能是系统架构的原因,还有可能是数据库的原因. 那么如何提高数据库SQL语句执行速度呢?有人会说性能调优是数据库管理员(DBA)的事,然而性能调优跟程序员们 ...

  10. xamarin android 开发

    开始环境vs2017 直接创建android 项目,左边是android studio 的项目目录  右边是vs创建的android 项目目录 结构基本相同,有res对应的Resources文件 加载 ...