致访客
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
第十节
条件渲染
React中条件渲染既是和javascript中,条件运算
如if-else、三元运算符
- 直接通过条件运算返回要渲染的JSX对象
- 通过条件运算得出JSX对象,再将JSX对象渲染到模板中
本节代码
import React from 'react';
import ReactDOM from 'react-dom';
function UserGreet(props) {
return (
<div>
<h1>欢迎登录</h1>
</div>
)
}
function UserLogin(props) {
return (
<div>
<h1>请先登录</h1>
</div>
)
}
class ParentCom extends React.Component {
constructor(props) {
super(props);
this.state = {
isLogin: false
}
}
login = () => {
this.setState({
isLogin: true
})
}
render() {
let element = null;
if (this.state.isLogin) {
element = <UserGreet></UserGreet>
} else {
element = <UserLogin></UserLogin>
}
return (
<div>
{/* 直接通过条件运算返回要渲染的JSX对象 */}
{this.state.isLogin ? <UserGreet /> : <UserLogin />}
<button onClick={this.login}>登录</button>
{/* 通过条件运算得出JSX对象,再将JSX对象渲染到模板中 */}
<hr />
<div>
{element}
</div>
</div>
)
}
}
ReactDOM.render(
<ParentCom />
,
document.querySelector("#root")
)