<!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. 【MaixPy3文档】写好 Python 代码！

    本文是给有一点 Python 基础但还想进一步深入的同学,有经验的开发者建议跳过. 前言 上文讲述了如何认识开源项目和一些编程方法的介绍,这节主要来说说 Python 代码怎么写的一些演化过程和可以如 ...

  2. c++ 11 是如何简化你的数据库访问接口的

    之前写过一篇文章专门分析了 c++ 模板编译过程中报的一个错误:<fatal error C1045: 编译器限制 : 链接规范嵌套太深 >,其中涉及到了 qtl -- 一个使用 c++ ...

  3. 主成分分析 | Principal Components Analysis | PCA

    理论 仅仅使用基本的线性代数知识,就可以推导出一种简单的机器学习算法,主成分分析(Principal Components Analysis, PCA). 假设有 $m$ 个点的集合:$\left\{ ...

  4. 2018ICPC南京D. Country Meow

    题目: 题意:三维里有n个点,找一个最小的球将所有点覆盖. 题解:退火法模拟的一道板子题. 1 #include <stdio.h> 2 #include <iostream> ...

  5. vscode配置c\c++环境

    目录 一.安装vscode 二.安装插件以及配置c\c++编译环境 1. 安装以下两个插件 2. 配置编译环境 一.安装mingw64(推荐) 方法一 方法二 二.如果你安装过visual studi ...

  6. JVM虚拟机知识问答总结（简单复习，快速回忆！）

    写在最前面 这个项目是从20年末就立好的 flag,经过几年的学习,回过头再去看很多知识点又有新的理解.所以趁着找实习的准备,结合以前的学习储备,创建一个主要针对应届生和初学者的 Java 开源知识项 ...

  7. 【安全研究】Domain fronting域名前置网络攻击技术

    出品|MS08067实验室(www.ms08067.com) 千里百科 Domain Fronting基于HTTPS通用规避技术,也被称为域前端网络攻击技术.这是一种用来隐藏Metasploit,Co ...

  8. C语言之预处理详解

    C语言之预处理详解 纲要: 预定义符号 #define #define定义标识符 #define定义宏 #define的替换规则 #与## 几点注意#undef 带副作用的宏参数 宏和函数的对比 命名 ...

  9. [源码解析] 并行分布式框架 Celery 之 worker 启动 (2)

    [源码解析] 并行分布式框架 Celery 之 worker 启动 (2) 目录 [源码解析] 并行分布式框架 Celery 之 worker 启动 (2) 0x00 摘要 0x01 前文回顾 0x2 ...

  10. 写个小程序01 | 注册微信小程序

    出于兴趣和学习目的,我想自己做一个基于"子弹笔记(Bullet Journal)"的小程序.由于个人开发经验很有限,只在课程作业中写过 web 前端,所以也不知道多久能写出来(逃) ...