import React from 'react';
import ReactDOM from 'react-dom'; 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>
);
}
} 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 />;
}
return <GuestGreeting />;
} function LoginButton(props) {
return (
<button onClick={props.onClick}>
Login
</button>
);
} function LogoutButton(props) {
return (
<button onClick={props.onClick}>
Logout
</button>
);
} ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);
import React from 'react';
import ReactDOM from 'react-dom'; function WarningBanner(props) {
if (!props.warn) {
return null;
} return (
<div className="warning">
Warning!
</div>
);
} class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true}
this.handleToggleClick = this.handleToggleClick.bind(this);
} handleToggleClick() {
this.setState(prevState => ({
showWarning: !prevState.showWarning
}));
} render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
} ReactDOM.render(
<Page />,
document.getElementById('root')
);

react 中文文档案例四 (登陆登出按钮)的更多相关文章

  1. react 中文文档案例三 (开关按钮)

    开关按钮制作   import React from 'react'; import ReactDOM from 'react-dom'; class Toggle extends React.Com ...

  2. react 中文文档案例七 (温度计)

    const scaleNames = { c: 'Celsius', f: 'Fahrenheit' }; function toCelsius(fahrenheit) { ) * / ; } fun ...

  3. react 中文文档案例六 (表单)

    class Reservation extends React.Component { constructor(props) { super(props); this.state = { isGoin ...

  4. react 中文文档案例五 (循环列表)

    function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) = ...

  5. react 中文文档案例二 (头像时间)

    import React from 'react'; import ReactDOM from 'react-dom'; function formatDate(date) { return date ...

  6. react 中文文档案例一 (倒计时)

    1.函数试组件 import React from 'react'; import ReactDOM from 'react-dom'; function Clock(props){ return( ...

  7. ThinkPHP---案例1登录登出和添加部门

    配置文件分3类:系统配置文件,分组配置文件,应用配置文件 ①系统配置文件ThinkPHP/Conf/convention.php: ②分组 / 模块 /平台配置文件Home/Conf/config.p ...

  8. ASP.NET Core 中文文档 第四章 MVC(4.6)Areas(区域)

    原文:Areas 作者:Dhananjay Kumar 和 Rick Anderson 翻译:耿晓亮(Blue) 校对:许登洋(Seay) Areas 是 ASP.NET MVC 用来将相关功能组织成 ...

  9. ASP.NET Core 中文文档 第四章 MVC(4.1)Controllers, Actions 和 Action Results

    原文:Controllers, Actions, and Action Results 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:许登洋(Seay) Action 和 acti ...

随机推荐

  1. Java enum(枚举)使用详解之四

    用法五:实现接口 所有的枚举都继承自java.lang.Enum类.由于Java 不支持多继承,所以枚举对象不能再继承其他类. public interface Behaviour { void pr ...

  2. BA 新web化 问题汇总

    1. 3D堆栈图在winform端无法显示,但在web端可以正常显示,说明与浏览器版本有关,在 IE 中设置文档模式为 IE8 即报错,IE9 却正常显示,可在 <head>节点下添加如下 ...

  3. Synchronized关键字、Lock,并解释它们之间的区别

    Synchronized 与Lock都是可重入锁,同一个线程再次进入同步代码的时候.可以使用自己已经获取到的锁. Synchronized是悲观锁机制,独占锁.而Locks.ReentrantLock ...

  4. maven手动安装oracle驱动到仓库

    1. 2.打开http://maven.jahia.org/maven2/一步步打开找到 我需要的版本 https://devtools.jahia.com/nexus/content/groups/ ...

  5. MSSQL 日期查询 包含NULL值

    方一: 以下做法保证数据里面没有NULL值 '') '') '') '') exec sp_executesql N'select ide_code as ''系统编号'',name as ''申请专 ...

  6. JAVA反射机制学习随笔

    JAVA反射机制是用于在运行时动态的获取类的信息或者方法,属性,也可以用来动态的生成类,由于所有类都是CLASS的子类,我们可以用一个CLASS类的实例来实例化各种类 例如: Class<?&g ...

  7. ROS探索总结(五)——创建简单的机器人模型smartcar

    前面我们使用的是已有的机器人模型进行仿真,这一节我们将建立一个简单的智能车机器人smartcar,为后面建立复杂机器人打下基础. 一.创建硬件描述包 roscreat-pkg  smartcar_de ...

  8. hibernate 对象OID

    它是hibernate用于区分两个对象是否是同一个对象的标识. 我们都知道,虚拟机内存区分两个对象看的是内存的地址是否一致.数据库区分两个对象,靠的是表的主键.hibernate负责把内存中的对象持久 ...

  9. matlab 修改文件夹下所有文件名大写为小写

    1. path = './DIR/';Files = dir(fullfile(path,'*.m'));LengthFiles = length(Files);for count_i = 1 : L ...

  10. 杭电ACM刷题(2):1005,Number Sequence 标签: 杭电acmC语言 2017-05-11 22:43 116人阅读

    Problem Description A number sequence is defined as follows: f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1 ...