<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Learn React</title>

    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

    <!-- 生产环境中不建议使用 -->

    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>

<div id="root"></div>

<script type="text/babel">

function UserGreeting(props){

    return <h1>Welcome back!</h1>;

}

function  GuestGreeting(props){

    return <h1>Please sign up.</h1>;

}

function Greeting(props){

    const isLoggedIn = props.isLoggedIn;

    if(isLoggedIn){

        return <UserGreeting/>;

    }else{

        return <GuestGreeting/>

    }

}

function LoginButton(props){

    return(

        <button onClick={props.onClick}>

            Login

        </button>

    );

}

function LogoutButton(props){

    return(

        <button onClick={props.onClick}>

            Logout

        </button>

    );

}

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;

        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('root')

);

</script>

</body>

</html>

React-条件渲染的更多相关文章

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

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

  2. React——条件渲染

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

  3. React条件渲染

    传参判断 class LoginControl extends React.Component { constructor(props) { super(props); this.handleLogi ...

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

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

  5. &&运算符，三木运算符与React的条件渲染

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

  6. react初探（一）之JSX、状态（state）管理、条件渲染、事件处理

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

  7. react 入坑笔记（五） - 条件渲染和列表渲染

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

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

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

  9. React文档（八）条件渲染

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

  10. React学习笔记（七）条件渲染

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

随机推荐

  1. Apache配置 6. 访问日记切割

    日志一直记录总有一天会把整个磁盘占满,所以有必要让它自动切割,并删除老的日志文件 (1)配置 (1)配置 # vim /usr/local/apache2 .4/conf/extra/httpd-vh ...

  2. P4847 银河英雄传说V2 题解（Splay）

    题目链接 P4847 银河英雄传说V2 解题思路 我天哪!!!\(splay\)在\(rotate\)的时候先\(upd(y)\)再\(upd(x)\)!!以后不能再因为这个\(WA\)一晚上了!!! ...

  3. 简历求职：STAR法则

    做了近2年的大学生就业辅导工作,也接触了很多即将走出校园的大学生,做个总结与大家分享,同时也是对自己的一个总结. 最近刚听说STAR法则,这也是一直我们给学生的指导思想,百度了一下: STAR法则,即 ...

  4. 利用eigen库简单实现矩阵功能

    eigen是目前运行速度较快的C++矩阵运算库,而且其轻便小巧安装方便的特点简直是吸引人啊!特做此笔记,记录一下这个安装简单.体积轻巧.功能强大的C++库. 1. Download and Insta ...

  5. 2019看雪CTF 晋级赛Q2第四题wp

    上次参加2019看雪CTF 晋级赛Q2卡在了这道题上,虽然逆出算法,但是方程不会解,哈哈哈哈,果然数学知识很重要呀,现在记录一下. 首先根据关键信息,根据错误提示字符串定位到这里: 1 int __t ...

  6. gstreamer常用命令

    由于有好一段时间没做GStreamer相关项目了,早前的一些记录需要做下记录,以待需要的时候查阅. 还是分几个小节来介绍吧,这样思路清晰一点.(格式有点乱,没时间整理,读者自行脑补) 1. 播放视频. ...

  7. 5、MyBatis教程之ResultMap

    6.ResultMap 要解决的问题:属性名和字段名不一致 1.查看之前的数据库的字段名 2.Java中的实体类设计 public class User { private int id; //id ...

  8. Mysql之索引选择及优化

    索引模型 哈希表 适用于只有等值查询的场景,Memory引擎默认索引 InnoDB支持自适应哈希索引,不可干预,由引擎自行决定是否创建 有序数组:在等值查询和范围查询场景中的性能都非常优秀,但插入和删 ...

  9. TypeError: myMethod() takes no arguments (1 given) Python常见错误

      忘记为方法的第一个参数添加self参数 ---------------------------------------------------------------

  10. Spring Cloud Alibaba(2)---Nacos概述

    Spring Cloud Alibaba(2)---nacos概述 上一篇博客讲了有关 SpringCloudAlibaba的概述,这篇开始讲SpringCloudAlibaba组件之一---Naco ...