条件渲染
其实就是使用if
或者三元运算符做一个判断,根据结果进行输出。
function UserGreeting(props){
return (
<h1>Welcome Back !</h1>
);
}
function GuestGreeting(props){
return (
<h1>Please Sign In !</h1>
);
}
function Greeting(props){
var isLogin=props.isLogin;
if(isLogin){
return <UserGreeting />;
}else{
return <GuestGreeting />;
}
}
ReactDOM.render(
<Greeting isLogin={true} />,
document.getElementById('root')
);
元素变量
上面的例子中我们使用的是传递进来的参数,或者我们也可以使用state
来保存状态。
class LoginController extends React.Component{
constructor(props){
super(props);
this.state={
isLogin:false
};
}
handleLoginClick=()=>{
this.setState({isLogin:false});
}
handleLogoutClick=()=>{
this.setState({isLogin:true})
}
render(){
const isLogin=this.state.isLogin;
let button=null;
if(isLogin){
button=<button onClick={this.handleLoginClick}>登录</button>
}else{
button=<button onclick={this.handleLogoutClick}>注销</button>
}
return (
<div>
{button}
</div>
);
}
}
ReactDOM.render(
<LoginController />,
document.getElementById('root')
);
与运算符:&&
在javascript
中,当:
true && expression
时会返回expression
,而false && expression
则会返回`false“。
所以可以这样简写:
var isLogin=true;
{isLogin &&
<button>当isLogin为true时会返回该表达式</button>
}
三目运算符
condition?true:false
var isLogin=false;
{isLogin?'欢迎光临':'请先登录'}
阻止组件渲染
设置render
的return
就可以阻止渲染了。
render(){
var isLogin=true;
if(isLogin){
return null;
}else{
return (
<button>登录</button>
);
}
}