React-条件渲染
2024-08-31 09:42:52
<!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>
最新文章
- Using View and Data API with Meteor
- JavaWeb学习笔记——开发动态WEB资源（七）bookapp
- jQuery获取Ajax函数的返回值
- Foreach能够循环的本质
- JQuery $.ajax()方法详解
- 将java项目打包成jar文件并在cmd运行
- ubuntu14.04下安装Naigos和pnp4nagios
- C# 内存管理优化畅想（三）---- 其他方法&结语
- HTTP分块传输
- 组合数学第一发 hdu 2451 Simple Addition Expression
- 【GIVENCHY商务休闲风格/白色/100%精梳棉/撞色拼接领/长袖衬衣】玛萨玛索男装网购商城
- 菜单工具栏wxPython菜单与工具栏基础示例
- View如何设置16进制颜色值
- SQL数据库置疑修复
- kaggle
- C#净化版WebApi框架
- 从fastjson多层泛型嵌套解析，看jdk泛型推断
- Python的真和假
- 记录Queue插入的时候报错
- Oracle 12c的自增列Identity Columns