<!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. c++ 11 是如何简化你的数据库访问接口的

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

  2. Spark SQL中Not in Subquery为何低效以及如何规避

    首先看个Not in Subquery的SQL: // test_partition1 和 test_partition2为Hive外部分区表 select * from test_partition ...

  3. 【.net core】三种注入方式的区别

    AddTransient瞬时模式:每次请求,都获取一个新的实例.即使同一个请求获取多次也会是不同的实例 AddScoped:每次请求,都获取一个新的实例.同一个请求获取多次会得到相同的实例 AddSi ...

  4. teprunner测试平台部署到Linux系统Docker

    本文是一篇过渡,在进行用例管理模块开发之前,有必要把入门篇开发完成的代码部署到Linux系统Docker中,把部署流程走一遍,这个过程对后端设计有决定性影响. 本地运行 通过在Vue项目执行npm r ...

  5. python基础学习之类

    面向对象和面向过程 面向过程:以吃饭为例,即为 煮饭.洗菜.洗碗.切菜.炒菜.出锅.吃饭面向对象:目标对象做完,直接吃疑问点:1.面向对象就是把过程用函数封装起来,随时调用?:2.面向过程就是每次都把 ...

  6. Bonuses on a Line Gym - 102569B

    题目链接:https://vjudge.net/problem/Gym-102569B 题意:数轴上有N个点,从0出发最多走t步问最多经过几个点. 思路:分开存负数点和整数点,然后枚举每个端点,某个点 ...

  7. ffmpeg第五篇：让水印图片旋转起来

    这篇把上次挖的坑填上 ffmpeg正式篇的上一篇(传送门)说了,这一篇要让水印旋转起来,但是后面有事情一直没有时间搞,今天,它来了............ 如果想实现旋转的功能,需要使用ffmpeg过 ...

  8. 解决wampserver 服务无法启动

    如图左击选中apache的httpd.conf把文本中的80端口,改成未被占用的端口.

  9. [搜索]P1088 火星人

    火星人 题目描述 人类终于登上了火星的土地并且见到了神秘的火星人.人类和火星人都无法理解对方的语言,但是我们的科学家发明了一种用数字交流的方法.这种交流方法是这样的,首先,火星人把一个非常大的数字告诉 ...

  10. MzzTxx——团队介绍

    项目 内容 这个作业属于哪个课程 2021春季计算机学院软件工程(罗杰 任健) 这个作业的要求在哪里 团队项目-团队介绍 我在这个课程的目标是 提升工程能力和团队意识,熟悉软件开发的流程 这个作业在哪 ...