传参判断

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. java面试总躲不过的并发(二):volatile原理 + happens-before原则

    一.happens-before原则 同一个线程中的,前面的操作 happens-before 后续的操作.(即单线程内按代码顺序执行.但是,在不影响在单线程环境执行结果的前提下,编译器和处理器可以进 ...

  2. java 线程理解

    import java.util.concurrent.Executor; import java.util.concurrent.ExecutorService; import java.util. ...

  3. Lunar Lander 月球冒险

    发售年份 1979 平台 街机 开发商 雅达利(Atari) 类型 飞行模拟 https://www.youtube.com/watch?v=McAhSoAEbhM

  4. R-shiny服务器安装及配置

    R的shiny 服务器管理-入门http://www.bio-info-trainee.com/1683.html sudo systemctl start shiny-serversudo syst ...

  5. 使用Python matplotlib做动态曲线

    今天看到“Python实时监控CPU使用率”的教程: https://www.w3cschool.cn/python3/python3-ja3d2z2g.html 自己也学习如何使用Python ma ...

  6. dd/MMM/yyyy:hh:mm:ss +0800日期格式的转化

    private static void myHandler() throws ParseException { String dtime1 = "23/Apr/2019:04:08:00 + ...

  7. fiddler 按条件过滤

    使用fiddler抓包过程中最希望获取自己想要的数据,不重要的信息最希望的是过滤,如果重要和不重要的数据都展示对我们在寻找资源的时候产生了很大的干扰,所以我们需要按条件过滤: 1.启用fiddler ...

  8. mysql数据备份及恢复

    备份工具 mysqldump mysqldump是mysql和mariadb上最好的备份工具之一,免费开源. mysqldump 首先查询每个数据库和每个表的结构与数据,然后把查出的所有内容导出到文本 ...

  9. C语言之二维数组与指针

    二维数组: ][]; 二维数组实质上也就是一维数组,a[2][3]可看做一个2个元素的一维数组,这2个元素又是另一个数组,在内存中,它的排布如下: #include "stdio.h&quo ...

  10. USD词汇表(USD Glossary)

    这篇文章是在学习USD的过程中龟速写成的,目的是将USD的核心设计.相关概念的说明.以及配套API整理出来,为后续进行的USD开发工作提供中文资料支持. 实际上也只有充分理解了USD设计中的每一个知识 ...