<!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. Java 获取小程序openid（基于SpringBoot）

    Java 获取小程序openid(基于SpringBoot) 官方文档 wx.login 1.引入Request封装依赖 <!--Request依赖--> <dependency&g ...

  2. 快速了解C# 8.0中“可空引用类型（Nullable reference type）”语言特性

    Visual C# 8.0中引入了可空引用类型(Nullable reference type),通过编译器提供的强大功能,帮助开发人员尽可能地规避由空引用带来的代码问题.这里我大致介绍一下可空引用类 ...

  3. kthread_worker和kthread_work机制

    1.概述 在阅读内核源码时,可以看到kthread_worker.kthread_work两个数据结构配合内核线程创建函数一起使用的场景.刚开始看到这块时,比较困惑,紧接着仔细分析源码后,终于弄清楚了 ...

  4. Java例题_38 自定义函数求字符串长度

    1 /*38 [程序 38 求字符串长度] 2 题目:写一个函数,求一个字符串的长度,在 main 函数中输入字符串,并输出其长度. 3 */ 4 5 /*分析 6 * 1.从键盘得到一个字符串 7 ...

  5. java例题_28 冒泡排序

    1 /*28 [程序 28 排序算法] 2 题目:对 10 个数进行排序 3 程序分析:可以利用选择法,即从后 9 个比较过程中,选择一个最小的与第一个元素交换, 下次类推, 4 即用第二个元素与后 ...

  6. 解决wampserver 服务无法启动

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

  7. [树形DP]电子眼

    电 子 眼 电子眼 电子眼 题目描述 中山市石一个环境优美.气候宜人的小城市.因为城市的交通并不繁忙,市内的道路网很稀疏.准确地说,中山市有N-1条马路和N个路口,每条马路连接两个路口,每两个路口之间 ...

  8. sql注入之超详细sqlmap使用攻略

    0x00 前言 干过sql注入的小伙伴们一定听说过sqlmap的大名,但是面对一些特殊情况,sqlmap也不一定"好使",这里的"好使"并不是真正不好使的意思, ...

  9. OOUnit4Summary

    一.前三次作业的架构设计 前言 第四单元以uml建模语言为背景,让我们通过已有的模型架构,设计实现类图(顺序图,状态图)解析器:在理解uml整体架构体系的基础上,读懂并熟练运用官方的给的代码,设计有层 ...

  10. OAuth 2.0 单元测试解决方案

    为什么需要单元测试 单元测试拥有保证代码质量.尽早发现软件 Bug.简化调试过程.促进变化并简化集成.使流程更灵活等优势.单元测试是针对代码单元的独立测试,核心是"独立",优势来源 ...