React.js 官网资料摘记：条件渲染

条件渲染

其实就是使用

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>
);
}
}