react初体验
2024-09-29 10:23:07
function Guest() {
return (
<h1>pls login in</h1>
);
}
function User() {
return (
<h1>hi, user</h1>
);
}
function Check(props) {
const isLogin = props.isLogin;
if (isLogin) {
return <User/>
}else {
return <Guest/>
}
}
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.handleLogin = this.handleLogin.bind(this);
this.handleLogout = this.handleLogout.bind(this);
this.state = {
isLogin: true
}
}
handleLogin() {
this.setState({isLogin: true});
}
handleLogout() {
this.setState({isLogin: false});
}
render() {
const isLogin = this.state.isLogin;
let button = null;
if (isLogin) {
button = <LogoutButton onClick={this.handleLogout}/>
}else {
button = <LoginButton onClick={this.handleLogin}/>;
}
return (
<div>
<Check isLogin = {this.state.isLogin}/>
{button}
</div>
);
}
}
let root = document.getElementById('root');
ReactDOM.render(<LoginControl/>, root);
最新文章
- 解决错误: Failed to load class "org.slf4j.impl.StaticLoggerBinder"
- TC79
- TextView中gravity属性值测定
- 第一次写python
- DIV内英文或者数字不换行的问题 解决办法
- OpenJudge/Poj 1657 Distance on Chessboard
- 查看源码Vim+Cscope
- 二、Mp3帧分析（标签帧）
- 使用requests模块爬虫
- protobuf 编码实现解析（java）
- JAVA_SE基础——9.基本数据类型间的转换
- SpriteKit关于SKScene中的渲染Loop
- Troubleshooting 10g and 11.1 Clusterware Reboots (文档 ID 265769.1)
- 问题：页面输出正常，php写入sqlserver乱码/空白。
- 1.Float精度在JS的解决方法
- Makefile中通过sed命令生成文件系统的selinux的配置文件vendor_filesystem_config.txt
- GT--记录android app消耗的cpu/内存/流量/电量
- .net core2.1 - ef core数据库迁移，初始化种子数据
- 再读vue2.0
- 牛客网PAT乙级(Basic Level)真题-数素数 (20)