<!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. [virtualenv][python] 环境管理——对 virtualenv 更轻便的封装

    virtualenv_simple_wrapper 如有错误,欢迎指出 Char-z 项目地址 gitee: virtualenv_simple_wrapper 使用说明 下载文件 virtualen ...

  2. 从零开始编写一个BitTorrent下载器

    从零开始编写一个BitTorrent下载器 BT协议 简介 BT协议Bit Torrent(BT)是一种通信协议,又是一种应用程序,广泛用于对等网络通信(P2P).曾经风靡一时,由于它引起了巨大的流量 ...

  3. 安装JDK9，jemter无法正常启动，怎么退回到JDK8

    安装JDK8,配置环境变量 java -version显示的是8.1 然后安装JDK9之后,java -version显示的是9+8.1 这个时候,无法正常启动jemter 在环境变量中把path的C ...

  4. linux下 > /dev/null 2 > &1 的意思和如何在后台启动进程

    一.几个基本符号及其含义 之前看到别人写的一个shell脚本,有一个命令是:rm -f ${src_tmp_file} > /dev/null 2>&1 现在大概明白是什么意思了 ...

  5. c# DataGirdView动态刷新

    using MySql.Data.MySqlClient;using System; using System.Data; using System.Threading; using System.W ...

  6. 攻防世界 reverse 进阶 9-re1-100

    9.re1-100 1 if ( numRead ) 2 { 3 if ( childCheckDebugResult() ) 4 { 5 responseFalse(); 6 } 7 else if ...

  7. Android Studio 上传本地项目到 GitHub 上

    •准备工作 注册 GitHub 账号 [GitHub官网] [视频教程] 安装 Git [官方链接] [极速下载链接] 创建本地代码仓库 在桌面上,鼠标右击,选择  Git Bash Here : 接 ...

  8. 导出目录的JS代码，与目录的三级标题测试

    二级标题 三级标题 三级标题 三级标题 三级标题 三级标题 二级标题 三级标题 三级标题 三级标题 三级标题 三级标题 这里是现在页尾目录功能的代码源码: <!-- 目录索引列表生成 --> ...

  9. Python代码简化

    让代码更Pythonic 当然不要过分追求简洁,不然阅读的人就遭殃了, 部分逻辑复杂的情况还应按照清晰的逻辑脉络去写方便阅读, 毕竟我们是用代码实现功能然后维护,而不是单单的炫技. ######### ...

  10. [图论]剑鱼行动:kruskal

    剑鱼行动 目录 剑鱼行动 Description Input Output Sample Input Sample Output 解析 难点 代码 Description 给出N个点的坐标,对它们建立 ...